CSS水平居中6種方法 與 CSS水平垂直居中7中方式
一： 水平居中
1. margin: 0 auto (設置當前元素)
<body>
? <!-- 水平居中方法 1 -->
? <div class="center">
? ? <p>水平居中</p>
? </div>
</body>
.center p {
? width: 200px;
? margin: 0 auto;
? background-color: #555;
}
2. 父元素設置: text-align: center
1. 只能對圖片, 按鈕, 文字等 行內元素 (display為inline 或 inline-block等) 進行水平居中 矿筝。
2.? 在 IE6端铛、7 這兩個奇葩的瀏覽器中, 它是能對任何元素進行水平居中的 摔竿。
<body>
? <!-- 水平居中方法 2 -->
? <div class="center2">
? ? <button>按鈕</button>
? </div>
</body>
.center2 {
? ? text-align: center;
}
3. 浮動《 結合 position:relative 》實現(xiàn)水平居中
<body>
? <!-- 水平居中方法 3 -->
? <div class="pagination">
? ? <ul>
? ? ? <li><a href="#">Prev</a></li>
? ? ? <li><a href="#">1</a></li>
? ? ? <li><a href="#">2</a></li>
? ? ? <li><a href="#">3</a></li>
? ? ? <li><a href="#">4</a></li>
? ? ? <li><a href="#">5</a></li>
? ? ? <li><a href="#">Next</a></li>
? ? </ul>
? </div>
</body>
.pagination {
? float: left;
? width: 100%;
? overflow: hidden;
? position: relative;
? background-color: bisque;
}
.pagination ul {
? clear: left;
? float: left;
? position: relative;
? left: 50%;
? text-align: center;
? background-color: #666;
}
.pagination li {
? line-height: 25px;
? margin: 0 5px;
? display: block;
? float: left;
? position: relative;
? right: 50%;
}
.pagination a {
? display: block;
? color: #f2f2f2;
? text-shadow: 1px 0 0 #101011;
? padding: 0 10px;
? border: 1px solid #333;
? border-radius: 2px;
}
.pagination a:hover {
? text-decoration: none;
? box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
? background: linear-gradient(top, #f48b03, #c87100);
}
4. position:absolute 絕對定位實現(xiàn)水平居中
1. 適用于父元素和子元素的寬度都確定的情況 潮尝。
2. 父元素 position: relative; 子元素給剩余寬度一半的 margin-left 。
<body>
? <!-- 水平居中方法 4 -->
? <div class="out">
? ? <p class="in">水平居中方法 4</p>
? </div>
</body>
.out {
? background-color: #c87100;
? width: 100%;
? position: relative;
? height: 300px;
}
.in {
? position: absolute;
? left: 50%;
? width: 300px;
? margin-left: -150px;
? background-color: blueviolet;
}
5. display:flex 彈性布局實現(xiàn)居中
6. 通過 transform 實現(xiàn) CSS 水平居中
二： 垂直居中
1. 在父元素中設置 display: table-cell 屬性 <此元素會作為一個表格單元格顯示>, 結合 vertical-align: middle;
<body>
? <div class="box box1">
? ? <span>垂直居中</span>
? </div>
</body>
.box1{
? display: table-cell;
? vertical-align: middle;
? text-align: center;
? background-color: red;
? height: 300px;
? width: 800px;
}
2. 父元素使用彈性布局 display : flex; align-items:center;
<body>
? <div class="box1 box2">
? ? <span>垂直居中</span>
? </div>
</body>
.box2{
? display: flex;
? justify-content:center;
? align-items:Center;
? height: 300px;
? width: 800px;
? background-color: red;
}
3. 父元素設置 display: flex 和 子元素設置 margin: auto
<body>
? <div class="box1 box2 box3 box4 box6 box7 box8">
? ? <div>垂直居中</div>
? </div>
</body>
.box8{
? display: flex;
? text-align: center;
? height: 300px;
? width: 100%;
? background-color: red;
}
.box8 div{
? margin: auto;
? width: 100px;
? height: 100px;
? background-color: brown;
}
4. 父元素相對定位 position:relative, 子元素絕對定位 position: absolute 和 負 margin
<body>
? <div class="box1 box2 box3">
? ? <span>垂直居中</span>
? </div>
</body>
.box3{
? position:relative;
? height: 300px;
? width: 800px;
? background-color: red;
}
.box3 span{
? position: absolute;
? width:100px;
? height: 50px;
? top:50%;
? left:50%;
? margin-left:-50px;
? margin-top:-25px;
? text-align: center;
}
5. 父元素設置 position: relative 相對定位; 子元素設置 position: absolute; transform:translate(-50%,-50%);
<body>
? <div class="box1 box2 box3 box4 box6">
? ? <span>垂直居中</span>
? </div>
</body>
.box6 {
? height: 300px;
? width: 100%;
? background-color: red;
? position: relative;
}
.box6 span{
? position: absolute;
? top:50%;
? left:50%;
? width: 200px;
? transform:translate(-50%,-50%);
? text-align: center;
? background-color: cadetblue;
}
6. 父元素 position: relative 相對定位, 子元素 position: absolute 絕對定位和 0《做遮罩可以使用》
<body>
? <div class="box1 box2 box3 box4">
? ? <span>垂直居中</span>
? </div>
</body>
.box4 {
? height: 300px;
? width: 100%;
? background-color: red;
? position: relative;
}
.box4 span{
? width: 200px;
? height: 200px;
? background-color: cadetblue;
? overflow: auto;
? margin: auto;
? position: absolute;
? top: 0;
? left: 0;
? bottom: 0;
? right: 0;
}
7. 父元素 display:inline-block 和 :after 來占位
<body>
? <div class="box1 box2 box3 box4 box6 box7">
? ? <div>垂直居中</div>
? </div>
</body>
.box7{
? text-align:center;
? font-size:0;
? height: 300px;
? width: 100%;
? background-color: red;
}
.box7 div{
? vertical-align:middle;
? display:inline-block;
? font-size:16px;
? width: 100px;
? height: 100px;
? background-color: brown
}
.box7:after{
? content:'';
? width:0;
? height:100%;
? display:inline-block;
? vertical-align:middle;
}
CSS
相關推薦
兩年經(jīng)驗面試阿里前端開發(fā)崗理茎，已拿offer黑界，這些知識點該放出來了
閱讀 5309
vue: 防止按鈕重復點擊
閱讀 966
【前端100問】Q74：使用 JavaScript Proxy 實現(xiàn)簡單的數(shù)據(jù)綁定
閱讀 76
Promise從入門到拿Offer之手寫Promise
閱讀 1938
前端面試：看了很多的前端面試真題，現(xiàn)在你知道怎么準備面試了嗎皂林？
閱讀 2009
