關於css基礎內容居中的思考與總結

水平居中

1.行內元素局中（只討論一個父元素和子元素）

方法一：

css代碼

body{
	text-align: center;
}
p{
	display: inline;
	background:#ff3;
}

2.塊狀元素局中

方法一（把塊狀元素轉化爲行內元素看待）：

body{
	text-align: center;
}
.container{
	width:100px;
	height:100px;
	background:#ff3;
	display: inline-block;
	
}

方法二(常規方法）：

.container{
	width:100px;
	height:100px;
	background:#ff3;
	margin：auto;
	
}

方法三：

.container{
float:left;
position:relative;
left:50%;
}
.children:{
width:100px;
height:100px;
position:relative;
left:-50%;
(right:50%)
}

方法四（flex模型，適用於一個或多個子元素）：

body{
	display: flex;
	justify-content: center;
}
.container{
	width:100px;
	height:100px;
	background:#ff3;
	
}

水平垂直居中

方法一：

#container{
    position:relative;
}
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

方法二：

#container{
    position:relative;
}
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}

方法三：

#container{
    position:relative;
}
#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

方法四：

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}