Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

整理CSS 水平垂直对齐 布局

发布于:  

居中

水平居中

inline-block + text-align

.parent {
	text-align: center;
}
.child {
	display: inline-block;
}

可兼容到IE8, 更低版本的需要使用 css hack 兼容。

table + margin

.child {
  border: 1px solid red;
  padding: 10px;
  
   display: table;
   margin: 0 auto;
}

此方案兼容至IE8,可以使用<table/>代替css写法,兼容性良好

absolute + transform

.parent{
    position: relative;
    height: 5em;
}
.child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

此方案兼容至IE9,因为transform兼容性限制,如果.child为定宽元素,可以使用以下写法,兼容性极佳

.parent{
    position: relative;
    height: 5em;
}
.child{
    position: absolute;
    width:100px;
    left: 50%;
    margin-left:-50px;
}

flex + justify + content

.parent{
    display: flex;
    justify-content: center;
}
.child{
    margin: 0 auto;
}

需要依赖于支持flex的浏览器

垂直居中

table-cell + vertial-align

.parent {
	display: table-cell;
	vertical-align: middle;
}

absolute + transform

.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	transform: translateY(-50%)
}

如果是定宽比较好 (结合使用margin-top)

flex + align + items

.parent {
    display: flex;
    align-items: center;
}

需要支持 flex 的浏览器

水平垂直居中

inline-block + table-cell + text-align + vertical-align

.parent{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.child{
    display: inline-block;
}

absolute + transform

.parent{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

flex + justify-content + align-items

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

布局

一列定宽,一列自适应

float + margin

.left{
    float: left;
    width: 100px;
}
.right{
    margin-left: 120px;
}

这种方法对于一列定宽比较好

float + overflow

.left{
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right{
    overflow: hidden;
}

flex

.parent {
	display: flex;
}
.left {
	 height: 200px;
    width: 100px;
    margin-right: 20px;
}
.right {
    flex: 1;
}

这个方法左右可以实现等高。

等高布局

DOM 结构(jade 格式)

 div.parent
 	div.left
 	div.right

float + overflow 实现左右等高

.parent {
  overflow: hidden;
}

.left,.right{
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

.left{
    float: left;
    width: 100px;
    margin-right: 20px;
 
  background-color: blue;
}
.right{
   overflow: hidden;
   height: 200px;
   background: red;  
}

table + table-cell

.parent {
  display: table;
  width: 100%;
}

.left,.right{
    display: table-cell;
}

.left{
    width: 100px;
  background-color: blue;
}
.right{  
   height: 200px;
   background: red;  
}

flex 等高

.parent {
	display: flex;
}
.left {
	 height: 200px;
    width: 100px;
    margin-right: 20px;
}
.right {
    flex: 1;
}

END

flex 功能很强大, 专门解决各种布局问题。

Flex 布局语法教程 MDN web docs

厚颜一下 ~^_^~

赏赐