色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css怎樣垂直居中對齊

CSS
張振鋒1年前6瀏覽0評論
CSS是一種用于網頁排版的語言，很多時候我們需要對元素進行垂直居中對齊，這個在前端開發中非常常見。下面介紹幾種實現垂直居中對齊的方法。
1、使用flexbox布局
可以使用常見的flexbox布局方式，在父元素中加入display:flex和align-items:center屬性就可以實現子元素的垂直居中對齊。
pre代碼如下：
<style>
.parent {
height: 300px;
display: flex;
align-items: center;
}
.child {
width: 100px;
height: 50px;
background-color: #ccc;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>

2、使用table-cell布局
也可以使用table-cell布局方式，在父元素中加入display:table-cell和vertical-align:middle屬性就可以實現子元素的垂直居中對齊。
pre代碼如下：
<style>
.parent {
height: 300px;
display: table-cell;
vertical-align: middle;
text-align: center;//對齊方式，加上這句可以讓子元素居中
}
.child {
width: 100px;
height: 50px;
background-color: #ccc;
display: inline-block;//需要加上這句使子元素能夠在父元素中顯示
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>

3、使用absolute定位布局
使用absolute定位布局可以實現子元素對于父元素的居中對齊，需要固定父元素的寬高，子元素也需要使用position:absolute屬性。
pre代碼如下：
<style>
.parent {
position: relative;
width: 300px;
height: 300px;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 50px;
background-color: #ccc;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>

以上三種方式都可以實現垂直居中對齊，可以根據實際情況選擇合適的方式。