php使css无法居中,总结css居中问题的解决办法

【行内元素】

①单个行内元素：

情况一：当link或文本有包裹元素时，设置相等的上下padding.link {

padding-top: 30px;

padding-bottom: 30px;

}

情况二：当link或文本没有包裹时，设置行高和高度相等.center-text-trick {

height: 100px;

line-height: 100px

}

②多个行内元素：方法一：将多个行内元素分别置于table-cell中

html部分:

1

css部分：

table td {

background: black;

color: white;

padding: 20px;

border: 10px solid white;

/* default is vertical-align: middle; */

}

方法二：将父元素设置为display:table,将自身设置为display:table-cell

html部分：

1

css部分：

.center-table {

display: table;

height: 250px;

width: 240px;

}

.center-table p {

display: table-cell;

vertical-align: middle;

}

方法三：使用felex

html部分：

1

css部分：

.flex-center{

display: flex;

justify-content: center;

flex-direction: column;

height: 400px;/*父容器必须有固定高度*/

}

方法四：当以上代码均不可用时，可尝试此奇淫巧技

html部分：

1

css部分：

.ghost-center {

position: relative;

}

.ghost-center::before {

content: " ";

display: inline-block;

height: 100%;

width: 1%;

vertical-align: middle;

}

.ghost-center p {

display: inline-block;

vertical-align: middle;

}