css常見布局及解決方案
把簡單做好也不簡單-css水平垂直居中
需要滿足兩個條件：
1.元素內容是單行，並且其高度是固定不變的。
2.將其line-height設定成和height的值一樣
這是一段文字span>
div>
divspan
charset="utf-8">
type="text/css">
.parent
.child
style>
head>
class="parent">
class="child">childdiv>
div>
body>
html>
效果圖強大的absolute對於這種小問題當然也是很簡單的。
charset="utf-8">
type="text/css">
.parent
.child
style>
head>
class="parent">
class="child">childdiv>
div>
body>
html>
但如果絕對定位元素是唯一的元素則父元素也會失去高度。
子節點：
position
: absolute;
top: 50%;
// 注意此時子節點不設定height為100px
-webkit-transform
: translate(0,-50%);
-ms-transform
: translate(0,-50%);
-o-transform
: translate(0,-50%);
transform
: translate(0,-50%);
同水平居中，這也可以用margin-top實現，原理水平居中
效果圖：
charset="utf-8">
type="text/css">
.parent
.child
style>
head>
class="parent">
class="child">childdiv>
div>
body>
html>
運用css3中的clac()屬效能簡化部分**：
position
: absolute;
height
: 100px;
/* 核心 */
top: calc(50% - 50px);
如果說absolute強大，那flex只是笑笑，因為，他才是最強的。。。但它有相容問題
charset="utf-8">
type="text/css">
.parent
.child
style>
head>
class="parent">
class="child">childdiv>
div>
body>
html>
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...
css 垂直居中
先膜拜一下鏈結裡的人。1.這個方法把一些 div 的顯示方式設定為 因此我們可以使用 的 vertical align property 屬性。divid divid cell divclass content content goes herediv div div cell 2.這個方法使用絕對...