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>本篇是個人筆記，可經常看看。向前走，也別忘記要多回顧
確認過眼神，我遇上對的人
Ry（元）
總結
以上是生活随笔為你收集整理的CSS--居中方式总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML/CSS 知识点
- 下一篇： CSS3伪元素、伪类选择器