資訊專欄INFORMATION COLUMN
摘要：水平居中子元素為行內(nèi)元素子元素為塊級元素多個塊級子元素垂直居中單行子元素空格不換行多行子元素可變換大小塊級子元素知道子元素高度不知道子元素高度水平垂直居中知道子元素的寬高子元素的沒有固定的寬高
https://css-tricks.com/center...水平居中 子元素為行內(nèi)元素
https://segmentfault.com/a/11...
.center-children {
text-align: center;
}
子元素為塊級元素
.center-me {
margin: 0 auto;
}
多個塊級子元素
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
.flex-center {
display: flex;
justify-content: center;
}
垂直居中
單行子元素
.link {
padding-top: 30px;
padding-bottom: 30px;
}
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap; //空格不換行
}
多行子元素
.center-table {
display: table;
}
.center-table p {
display: table-cell;
vertical-align: middle;
}
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
resize: vertical; //可變換大小
}
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
塊級子元素
知道子元素高度
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
不知道子元素高度
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
水平垂直居中
知道子元素的寬高
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
子元素的沒有固定的寬高
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.parent {
display: flex;
justify-content: center;
align-items: center;
}
body, html {
height: 100%;
display: grid;
}
span {
margin: auto;
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/112760.html
摘要：上一篇世界筆記二盒模型四大家族下一篇世界筆記四流的保護(hù)與破壞寫在前面在頁面布局中，內(nèi)聯(lián)元素的垂直對齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會因?yàn)榇怪睂R中的，而頭疼不已。 上一篇：《CSS世界》筆記二：盒模型四大家族下一篇：《CSS世界》筆記四：流的保護(hù)與破壞 寫在前面 在頁面布局中，內(nèi)聯(lián)元素的垂直對齊是比較常見和基礎(chǔ)的布局需求，但是我們往往會因?yàn)榇怪睂R中的1px，2px而頭疼不已...
摘要：核心代碼利用布局利用布局，其中用于設(shè)置或檢索彈性盒子元素在主軸橫軸方向上的對齊方式而屬性定義子項(xiàng)在容器的當(dāng)前行的側(cè)軸縱軸方向上的對齊方式。核心代碼相對于的水平垂直居中列表布局兼容性好核心代碼布局核心代碼css對齊方案總結(jié) 垂直居中 通用布局方式(內(nèi)斂元素和塊狀元素都適用) 利用flex:核心代碼: 12345 .container{ display:flex; ...
第一種垂直居中方法 利用vertical-align：middle進(jìn)行垂直方向上的居中對齊，此方法需要滿足的條件： 設(shè)置父元素的行高line-height等于父元素height的高度 子元素必須是行內(nèi)塊級元素display:inline-block; 子元素設(shè)置vertical-align：middle 此方法在開發(fā)中不能右浮動(不能靠右邊) 下方是完整代碼，可以新建一個HTML文件進(jìn)行測...
第一種垂直居中方法 利用vertical-align：middle進(jìn)行垂直方向上的居中對齊，此方法需要滿足的條件： 設(shè)置父元素的行高line-height等于父元素height的高度 子元素必須是行內(nèi)塊級元素display:inline-block; 子元素設(shè)置vertical-align：middle 此方法在開發(fā)中不能右浮動(不能靠右邊) 下方是完整代碼，可以新建一個HTML文件進(jìn)行測...
摘要：方法二利用，設(shè)置元素結(jié)構(gòu)，并應(yīng)用實(shí)現(xiàn)垂直居中，這種方法的實(shí)現(xiàn)可用于多行文本，要求及以上版本。 讓元素居中對齊是非常常見的需求，首先是水平居中，要實(shí)現(xiàn)水平居中行內(nèi)元素只需要在其父元素上設(shè)置text-align: center即可，對于塊級元素來說讓它的margin-left: auto和margin-right: auto即可（width不可為auto），那么垂直居中呢？找下css屬性發(fā)...
閱讀 2173·2021-11-22 09:34
閱讀 2414·2021-10-08 10:18
閱讀 1959·2021-09-29 09:35
閱讀 2746·2019-08-29 17:20
閱讀 2387·2019-08-29 15:36
閱讀 3617·2019-08-29 13:52
閱讀 1009·2019-08-29 12:29
閱讀 1397·2019-08-28 18:10
