html>
<
htmllang="en">
<
head>
<
metacharset="utf-8">
<
title>
title>
head>
<
style>
html,body
.parentelement
.childelement
/* 第一種 無相容性問題，但需要知道居中元素的寬和高*/
/*相對定位和固定定位會脫離標準流*/
.parentelement-one
.childelement-one
/*相容ie10以上*/
/*第二種*/
.parentelement-two
.childelement-two
/*第三種*/
.childelement-three
/*第四種*/
.parentelement-fore
/*相容ie10以上*/
/*第五種 水平居中*/
/*行內元素 設定 text-align:center (文字, 給父元素設定)水平居中*/
/*父元素高度確定的單行文字： height = line-height 垂直居中*/
/*父元素高度確定的多行文字(行內塊): 先設定 display:table-cell 再設定 vertical-align:middle*/
.childelement
style>
<
body>
<
divclass="parentelement">
<
divclass="childelement">
<
span>dd
span>
div>
div>
body>
html>
前端元素垂直水平居中的多個方法
建立乙個bfc，高度坍塌 居中 margin重合問題均可解決 1 浮動元素float不為none 2 絕對定位或固定定位 position absolute fixed 3 行內元素 display inline block 4 overflow不為visible的塊級元素 5 display值為f...
css 元素居中
水平居中 1.行內標籤 和行內塊級標籤可以設定 text algin center 2.塊級標籤 margin 0 auto 對浮動元素或絕對定位元素無效 不識別auto。3.浮動的元素 定位加left 50 transform translate 50 0 垂直居中 1.行內標籤 和行內塊級標籤可...
css 元素居中
元素有寬高 未知寬高 水平居中 1.margin 2.text align 3.position absolute和0 4.position absolute和負margin 5.translatex 6.flex 7.table cell 1.translatex 2.flex 3.table c...