CSS 居中方式总结
一、水平居中方法
1.行内元素、字体的水平居中
1.对于行内元素（display值为inline或inline-block都可以）或者字体：父元素添加css规则：text-align：center;
<style> p{ /*关键*/ text-align:center; } ul{ /*关键*/ text-align:center: } /*这里li设置inline-block*/ .item{ /*关键*/ display:inline-block; } </style> <!--字体--> <p>I am ry</p> <!--行内元素--> <ul> <li class="item">1</li> <li class="item">2</li> <li class="item">3</li> <li class="item">4</li> </ul>
2.块元素的水平居中
1.使用margin实现水平居中
将margin-left 和 margin-right 设置为auto，块元素将会自动匹配适应，实现水平居中
<style> *{ margin:0; padding:0; } .box1{ height:300px; background:blue; } .item1{ /*关键，margin-left，margin-right设置为auto*/ margin: 0 auto; width: 100px; height: 100px; background:red; } </style> <body> <div class="box1"> <div class="item1"></div> </div> </body>
2.使用position+margin-left实现水平居中
定位后，设置left先整体偏移父容器的一半，再使用负margin-left自己一半的宽度，从而子元素中心对准父元素中心。
<style> .box2{ position:relative; height:300px; background:blue; } .item2{ /*关键 相对定位*/ position: relative; /*关键*/ left: 50%; /*关键*/ margin-left:-50px; width:100px; height:100px; background:red; } </style> <body> <div class="box2"> <div class="item2"></div> </div> </body>
3.如果是多个块元素在同一水平线居中排列，则将其display设置成inline-block，还有一种是使用flexbox的布局方式来实现。
块元素设置了inline-block后，拥有行内元素并排特点，只要父元素设置text-align即可使其水平居中。
<style> .box3{ /* 关键，对于行内元素水平居中 */ text-align: center; } .item3{ /* 关键，将块元素设置成行内块接元素 */ display:inline-block; width:100px; height: 100px; background:red; } </style> <body> <div class="box3"> <div class="item3"></div> <div class="item3"></div> <div class="item3"></div> <div class="item3"></div> </div> </body>
二、垂直居中
1.行内元素或者文字（单行情况）
1.可以直接使用line-height属性来设置: 将line-height设置成和height一样即可
<style> .text{ height:100px; line-height:100px; border:1px solid red; } </style> <body> <div class="text"> we dont talk anymore </div> </body> 2.使用padding（top,bottom）通过增加内边距来实现垂直的居中 <style> .ctext{ /*关键*/ padding-top:30px; padding-bottom:30px; border:1px solid red; } </style> <body> <div class="ctext">确认过眼神，我遇上对的人</div> </body>
2.行内元素或者文字（多行情况）
1.照样可以使用padding（top 和 bottom）
2.对父元素设置display:table-cell 和 vertical-align:middle
<style> .box{ /* 将其变成单元格的形式 */ display: table-cell; /* width:100px; */ height:300px; border:1px solid red; /* 设置内联元素的垂直对齐的方式 */ vertical-align: middle; } </style> <body> <div class="box"> <span>how to love</span><br> <span>I knoe I need somebody</span><br> <span>I know I need somebody</span><br> <span>pary for me</span> </div> </body>
3.块元素垂直居中
1.确定宽高的情况
使用position 和 margin-top配合
<style> *{ margin:0; padding:0; } /* 父元素 */ .parent{ position:relative; height:400px; border: 1px solid blue; } /* 子元素 */ .child{ /* position */ position: relative; /* 距离顶部50% */ top:50%; /* 再用margin-top 向上调子容器一半高度，则刚好子元素中心对准父元素中心 */ margin-top:-100px; height:200px; border:1px solid red; } </style> <body> <div class="parent"> parent <div class="child"> child </div> </div> </body>
2.对于未知宽高的
使用transform 的 translateY(-50%) 向上平移自身一半
<style> .parent2{ position: relative; background:blue; height:400px; } .child2{ position: relative; top:50%; transform: translateY(-50%); background: red; } </style> <div class="parent2"> parent2 <div class="child2">child2</div> </div>
3.使用flex布局
<style> .parent3{ /*关键flex*/ display:flex; display: -webkit-flex; /* 对齐排列居中 */ justify-content:center; /* 排列方向垂直 */ flex-direction:column; height:400px; background:yellow; } .child3{ height:100px; } </style> <body> <!-- flexbox --> <div class="parent3"> <div class="child3"></div> </div> </body>
三、水平且垂直居中
1.position 和 margin 配合
<style> *{ margin: 0 ; padding: 0 ; } .box1{ position:relative; height:400px; background:blue; } .item1{ /*关键*/ position: absolute; top: 50%; left: 50%; margin-top:-50px; margin-left:-50px; width:100px; height:100px; background: red; } </style> <body> <div class="box1"> <div class="item1"></div> </div> </body>
2.使用flex布局
同时设置两条居中属性 justify-content 和 align-items
<style> .box2{ display: flex; /*关键*/ justify-content: center; /*关键*/ align-items: center; height:300px; background:yellow; } .item2{ width:50px; height:50px; background:red; } </style> <body> <div class="box1"> <div class="item1"></div> </div> <div class="box2"> <div class="item2"></div> </div> </body>
原文作者：昵称：渊源远愿（博客园）
原文链接：https://www.cnblogs.com/Ry-yuan/p/8474206.html
