css 水平垂直居中的几种常见方式

下面是几种常见的水平垂直居中方式，可在不同情形下方便采用不同的方式

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的作用及具体原因见 http://blog.csdn.net/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;}

效果图：

说明：红色块在绿色块中居中，红色块中的文字垂直水平居中

css 水平垂直居中的几种常见方式相关推荐

html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
CSS水平垂直居中的几种实现方式
水平垂直居中 1.利用 `position:absolute` 2. 利用`margin:auto` 3. 利用弹性盒子 4. 利用水平对齐和行高 5. 最简便的方法 1.利用 position:ab ...
CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
CSS水平垂直居中的几种方法
我们都知道,固定宽高的 div 在网页中水平垂直居中很简单,相信大家也很容易的写出来,但是不固定宽高的 div 如何水平垂直居中呢?我们在网页布局,特别是手机等 web 端网页经常是不固定宽高的 di ...
css居中怎么移动,移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现兼容性: 当前流行的使用方法. .box{ width: 100%; height: 100%; } .content{ position: abso ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
CSS | 水平垂直居中都有哪几种方式
我把一个子元素在父元素中水平垂直居中的实现方式分为三类,第一类是宽度已知,第二类是宽度未知,第三类是图片水平垂直居中. 第一类宽度已知第一种方式:采用绝对定位原理元素开启绝对定位后,水平方向和 ...
css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式一.使用grid布局二.使用flex布局三.使用定位+外边距四.使用定位+平移五.使用外边距 + 平移六.使用文本对齐 + 行高七.使用表格单元一.使用 ...
css水平垂直居中四种常用方式
css水平垂直居中第一种:flex布局水平垂直居中思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...

css 水平垂直居中的几种常见方式

css 水平垂直居中的几种常见方式相关推荐

最新文章

热门文章