CSS--居中方式总结
一、水平居中方法
1.行內(nèi)元素、字體的水平居中
1.對于行內(nèi)元素（display值為inline或inline-block都可以）或者字體：父元素添加css規(guī)則：text-align：center;
<style> p{/*關(guān)鍵*/text-align:center; }ul{/*關(guān)鍵*/ text-align:center: } /*這里li設(shè)置inline-block*/ .item{/*關(guān)鍵*/display:inline-block; }</style> <!--字體--> <p>I am ry</p><!--行內(nèi)元素--> <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實現(xiàn)水平居中
將margin-left 和 margin-right 設(shè)置為auto，塊元素將會自動匹配適應(yīng)，實現(xiàn)水平居中
<style> *{margin:0;padding:0; } .box1{height:300px;background:blue; } .item1{/*關(guān)鍵，margin-left，margin-right設(shè)置為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實現(xiàn)水平居中
定位后，設(shè)置left先整體偏移父容器的一半，再使用負(fù)margin-left自己一半的寬度，從而子元素中心對準(zhǔn)父元素中心。
<style> .box2{position:relative;height:300px;background:blue; } .item2{/*關(guān)鍵 相對定位*/position: relative;/*關(guān)鍵*/left: 50%;/*關(guān)鍵*/margin-left:-50px;width:100px;height:100px;background:red; } </style> <body><div class="box2"><div class="item2"></div></div> </body>3.如果是多個塊元素在同一水平線居中排列，則將其display設(shè)置成inline-block，還有一種是使用flexbox的布局方式來實現(xiàn)。
塊元素設(shè)置了inline-block后，擁有行內(nèi)元素并排特點，只要父元素設(shè)置text-align即可使其水平居中。
<style> .box3{/* 關(guān)鍵，對于行內(nèi)元素水平居中 */text-align: center; }.item3{/* 關(guān)鍵，將塊元素設(shè)置成行內(nèi)塊接元素 */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.行內(nèi)元素或者文字（單行情況）
1.可以直接使用line-height屬性來設(shè)置: 將line-height設(shè)置成和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）通過增加內(nèi)邊距來實現(xiàn)垂直的居中
<style> .ctext{/*關(guān)鍵*/padding-top:30px;padding-bottom:30px;border:1px solid red;} </style> <body><div class="ctext">確認(rèn)過眼神，我遇上對的人</div> </body>2.行內(nèi)元素或者文字（多行情況）
1.照樣可以使用padding（top 和 bottom）
2.對父元素設(shè)置display:table-cell 和 vertical-align:middle
<style>.box{/* 將其變成單元格的形式 */display: table-cell;/* width:100px; */height:300px;border:1px solid red;/* 設(shè)置內(nèi)聯(lián)元素的垂直對齊的方式 */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 向上調(diào)子容器一半高度，則剛好子元素中心對準(zhǔn)父元素中心 */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{/*關(guān)鍵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{/*關(guān)鍵*/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布局
同時設(shè)置兩條居中屬性 justify-content 和 align-items
<style>.box2{display: flex;/*關(guān)鍵*/justify-content: center;/*關(guān)鍵*/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>本篇是個人筆記，可經(jīng)常看看。向前走，也別忘記要多回顧
確認(rèn)過眼神，我遇上對的人
Ry（元）
總結(jié)
以上是生活随笔為你收集整理的CSS--居中方式总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML/CSS 知识点
- 下一篇： CSS3伪元素、伪类选择器