如何居中div
编辑：Simone
2025-02-23 14:42:05
543 阅读
使用CSS实现div的居中显示，有多种方法，比较常用的，我做了一个总结。
首先创建一个HTML，清除浏览器自带的样式。
创建一个div，设置长和高，再添加一个颜色，为了好的效果演示。
div {
height: 200px;
width: 300px;
background-color: aquamarine;
}
实现div的水平居中，主要使用的是margin属性的设置。
实现div的垂直和水平居中，采用的是绝对定位布局。
div {
height: 200px;
width: 300px;
background-color: aquamarine;
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
实现div的垂直和水平居中，使用transform属性。
div {
height: 200px;
width: 300px;
background-color: aquamarine;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
版权声明：本站【趣百科】文章素材来源于网络或者用户投稿，未经许可不得用于商用，如转载保留本文链接：https://www.qubaik.com/life/142115.html
