How to set css center alignment

Css center alignment setting method: 1. Horizontal centering [text-align:center]; 2. Horizontal centering [margin: 0 auto]; 3. Vertical centering [line-height]; 4. Use tables , horizontal and vertical centering; 5. Flexible layout, horizontal and vertical centering.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to set css center alignment:

1. text-align:center - horizontal centering

Only for text, pictures, buttons, etc. Inline elements are valid (display is set to inline or inline-block, etc.) for horizontal centering

2, margin: 0 auto; —— Horizontal centering

is only horizontally centered, and is invalid for floating element positioning

 .father{
           width:500px;
           height:200px;
           background-color::#f98769;
           overflow:hidden;//不可缺少否则margin-top不生效
       }
        .son{
            width: 100px;
            height: 100px;
            margin:50px auto ;
            background-color: #ff0000;
        }

3. line-height - vertical centering

line-height=height, only valid for one line of text

4. Use table - horizontal and vertical centering

The align='center' and valign='middle' attributes of td/th can be centered horizontally and vertically

5. Flexible layout - horizontal and vertical centering

.father{
display:flex;
justity-content:center;
align-items:center;
}
.father{
display:flex;
flex-direction:column;//改变主轴为cross axis
justity-content:center;
}

6. Use display: table-cell - horizontal and vertical centering

For those elements that are not tables, we can use display:table-cell to simulate it into a table cell

.father{
    height:300px;
    background:#ccc;
    display:table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align:middle; /*IE8以上及Chrome、Firefox*/
    text-align:center;
 }
 .son{
 display:inline-block;//或是inline
 }

7. Strange skills - the child must be the same as the father (the width and height of the child element are known) - horizontal and vertical centering

.father{
position:relative;
}
.son{//m、n为子盒子宽、高的一半
position:absolute;
left:50%;
top:50%;
margin-left:-mpx;
margin-top:-npx;

8. The width and height of the unknown child element - horizontal and vertical centering

.father {
    position:relative;
}
.son {
    position:absolute;
    top:50%;
    left:50%:
    transform:translate(-50%,-50%) /*单独设置transform:translateY(-50%);*/
}

9. Pseudo element method - vertical centering

.father{
    position: relative;
}
.father::before{
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.son{
    display: inline-block;
    vertical-align: middle;
}

Recommended related tutorials: CSS video tutorial

The above is the detailed content of How to set css center alignment. For more information, please follow other related articles on the PHP Chinese website!