下面是几种常见的水平垂直居中方式，可在不同情形下方便采用不同的方式
html
<body><div class="box"><div class="content"></div></div></body>
共同的css
.content{width: 50%;height: 50%;margin: 0 auto;background-color: tomato;}
1.最简单的margin:auto水平居中
这里box里的overflow:hidden的作用及具体原因见 /oiu1010110/article/details/53192048
.box{width: 400px;height: 400px;margin: 50px auto;background-color: palegreen;overflow: hidden;/*这里是简单的防止边界叠加，若不加，box的margin-top将变成70px*//*padding-top: 1px;*//*border: 1px solid transparent;*//*float: left;*/}.content{width: 50%;height: 50%;margin: 70px auto;background-color: tomato;}
2.absolute+margin 水平垂直居中
.box {width: 400px;height: 400px;margin: 50px auto;background-color: palegreen;position: relative;}.content{width: 80%;/*宽高可以随便变*/height: 80%;margin: auto; /*水平居中*/position: absolute;/*垂直居中*/left: 0;right: 0;bottom: 0;top: 0;background-color: tomato;}
3. left:50%+top:50% margin为自己宽高的一半 垂直水平居中
情况1：
.box{width: 400px;height: 400px;margin: 50px auto;background-color: palegreen;overflow: hidden;/*同1中的，这种情况下不可以省*//*padding-top: 1px;*//*border: 1px solid transparent;*//*float: left;*/}.content{position: relative; width:200px; height:100px;left: 50%;margin-left: -100px;top: 50%;margin-top: -50px;background-color: tomato;}
或
.box{width: 400px;height: 400px;margin: 50px auto;background-color: palegreen;overflow: hidden;/*padding-top: 1px;*//*border: 1px solid transparent;*//*float: left;*/}/*margin-top 这里有两个坑：1.百分比表示的时候参照的是父元素的宽；2.当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界会发生叠加3.只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。*/.content {width: 50%;height: 50%; /*参照 父元素的height*/margin-top: -25%;/*参照 父元素的width*/margin-left: -25%;position: relative;top: 50%;left: 50%;background-color: tomato;}
情况2：
.box{width: 400px;height: 400px;margin: 50px auto;background-color: palegreen;position: relative;}.content {position: absolute; width:200px; height:100px;left: 50%;margin-left: -100px;top: 50%;margin-top: -50px;background-color: tomato;}
4.absolute与translate 垂直水平居中
.box{width: 400px;height: 400px;margin: 50px auto;background-color: palegreen;position: relative;}.content {width: 50%;height: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: tomato;}
5.display:flex 垂直水平居中
.box{width: 400px;height: 400px;margin: 50px auto;background-color: palegreen;display: flex;justify-content: center;/*水平居中*/align-items: center;/*垂直居中*/}.content {width: 50%;height: 50%;background-color: tomato;}
6.line-height+height 垂直水平居中
<body><div class="content">我要垂直水平居住</div></body>
div,body{padding: 0;margin: 0;}body{background-color: darkgrey;}.content{width: 200px;height: 200px;margin: 50px auto;background-color: palegreen;text-align: center;line-height: 200px;vertical-align: middle;}
注意：用line-height等于height垂直居中 只能用固定的px ,不可以用百分比，因为line-height参照的自身字体的大小，而不是height
效果图：
7.display:flex 嵌套使用垂直水平居中
<body><div class="box"><div class="content">我要垂直居中</div></div></body>
div,body{padding: 0;margin: 0;}body{background-color: darkgrey;}.box{width: 600px;height: 400px;margin: 50px auto;background-color: palegreen;display: flex;/*这里用了css3的flex新特性垂直水平居中*/justify-content: center;/*水平居中*/align-items: center;/*垂直居中*/}.content {width: 50%;height: 20%;display: flex;/*嵌套使用flex*/justify-content: center;align-items: center;background-color: tomato;}
效果图：
说明：红色块在绿色块中居中，红色块中的文字垂直水平居中
![[2024年]现代幸福生活的名言1200字](https://1200zi.500zi.com/uploadfile/img/2024/06/06/7366fcce738db5bc8e8a851cab4c1ed3.jpg)
