id="div1">
這是單行文字垂直居中
div>
/*css***/
#div1
id="div1">
這是多行文字垂直居中，
這是多行文字垂直居中，
這是多行文字垂直居中，
這是多行文字垂直居中。
div>
/*css***/
#div1
id="outer">
id="middle">
這是固定高度多行文字垂直居中，
這是固定高度多行文字垂直居中，
這是固定高度多行文字垂直居中，
這是固定高度多行文字垂直居中。
div>
div>
/*css***/
#outer
#middle
id="outer">
id="middle">
id="content">
這是固定高度多行文字垂直居中(相容ie7)，
這是固定高度多行文字垂直居中(相容ie7)，
這是固定高度多行文字垂直居中(相容ie7)，
這是固定高度多行文字垂直居中(相容ie7)。
div>
div>
div>
/*css***/
#outer
#middle
#content
id="outer">
id="middle">
子div(固定大小)垂直居中
div>
div>
/*css***/
#outer
#middle
#middle
id="outer">
id="middle">
利用絕對定位實現子div大小不固定垂直居中
div>
div>
/*css***/
#outer
#middle
id="outer">
id="middle">
利用vertical-align屬性實現子div大小不固定垂直居中
div>
div>
/*css***/
#outer
#middle
id="outer">
id="middle">
利用display: flex實現子div大小不固定垂直居中
div>
div>
/*css***/
#outer
#middle
CSS文字和div垂直居中方法總結
在樣式布局中，我們經常碰到需要將元素居中。通過css實現元素的水平居中較為簡單 對文字，只需要對其父級元素設定text align center 而對div等塊級元素，只需要設定其left和right的margin值為auto。要實現元素的垂直居中，有人會想到css中的vertical align屬...
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...
div水平垂直居中方法總匯
方法一 絕對定位方法 不確定當前div的寬度和高度，採用transform translate 50 50 當前div的父級新增相對定位 position relative children方法二 絕對定位方法 確定當前div寬度和高度嗎，margin值為當前div寬度一半的負值。children方...