css水平、垂直居中常用的几种方式
行内元素水平、垂直居中
- 方案一(不设置居中元素宽高)，代码如下： 使用display: table;display:table-cell；vertical-align:middle;属性
复制代码这里是测试的内容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae earum nobis unde vel. Ab accusantium distinctio ex ipsa necessitatibus. Dolorum facere impedit laudantium magni minima molestiae, nam quidem soluta veniam.
/*css代码段*/ .line-align-center-one-content{ display: table; width: 100%; } .line-align-center-one{ height: 400px; display: table-cell; vertical-align: middle; border: 1px solid #e4393c; text-align: center; } .mark-item{ background: #ccc; color: #fff; }复制代码 这里主要是使用text-align:center;是元素水平居中
- 方案二：使用绝对定位+位移(不设置居中元素宽高)，代码如下：
这里是一个行内元素 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam exercitationem pariatur recusandae voluptate. Amet, animi architecto commodi cumque distinctio, dolorum eaque laborum modi molestiae mollitia nesciunt perferendis rem tenetur voluptate!复制代码
/*css代码段如下*/ .line-align-center-two{ position: relative; height: 400px; border: 1px solid #e4393c; } .mark-two{ background: #ccc; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) ; }复制代码 - 方案三（不设置居中元素宽高）：使用相对定位+位移+text-align: center;代码如下：
<-- html代码段如下-->这里是一个行内元素复制代码
/*css代码段如下*/ .line-align-center-three{ height: 400px; border: 1px solid #e4393c; text-align: center; } .mark-three{ position: relative; top: 50%; transform: translateY(-50%) ; background: #ccc; color: #fff; }复制代码 - 方案四（不设置居中元素宽高）：使用flex布局，代码如下：
这里是一个行内元素 lorem复制代码
.line-align-center-four{ display:flex;/*Flex布局*/ display: -webkit-flex; /* Safari */ align-items:center;/*指定垂直居中*/ height: 400px; border: 1px solid #e4393c; justify-content: center;/*指定水平居中*/ } .mark-four{ background: #ccc; color: #fff; }复制代码 -
方案五（不设置居中元素宽高）：使用伪类，代码如下：
这里是一个行内元素 Lorem复制代码/*css代码如下*/ .line-align-center-five { height: 400px; border: 1px solid #e4393c; text-align: center;/*水平居中*/ font-size: 0;/*这一个很重要*/ } .line-align-center-five:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .mark-five { font-size: 14px; display: inline-block; vertical-align: middle; background: #ccc; color: #fff; line-height: 26px; }复制代码
块级元素，水平、垂直居中
块级元素的居中同样可以使用上述的行内元素的居中方案。
通用方案
- 在已知容器和居中元素的宽高的情况下，可以使用margin来调节元素居中；
复制代码这里是内容区域，宽高100
/*css代码如下：*/ .common-item{ height: 400px; border: 1px solid #e4393c; } .common-one{ width: 100px; height: 100px; border:1px solid blue; margin: 150px auto 0; }复制代码 - 在已知居中元素的宽高尺寸的情况下，可以使用绝对定位或相对定位+margin负值来实现
复制代码这里是内容区域，宽高100
.common-item-two{ height: 400px; border: 1px solid #e4393c; position: relative; } .common-two{ width: 100px; height: 100px; border:1px solid blue; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; }复制代码 或
复制代码这里是内容区域，宽高100
.common-item-two{ height: 400px; border: 1px solid #e4393c; } .common-two{ width: 100px; height: 100px; border:1px solid blue; position: relative; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; }复制代码 - 通过line-height属性来设置内容居中这里就不再做演示了。
欢迎大家多多指教。