How to set center alignment in css

How to set center alignment in css: 1. Horizontal centering through "text-align:center" or "margin:vertical auto;"; 2. Vertical centering through "line-height"; 3. "Flexible layout" realizes horizontal and vertical centering and so on.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

css——Center alignment method

• ##text-align:center —— Horizontal centering

is only valid for inline elements such as text, pictures, buttons, etc. (display is set to inline or inline-block, etc.) for horizontal centering

• margin: vertical auto; ——Horizontal centering

Only horizontal centering, and 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;
        }

• line-height —— Vertical centering

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

• Use table——Horizontal and vertical centering

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

• Flexible layout——horizontal, Vertical centering

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

• Use display: table-cell - horizontal and vertical centering

For those that are not tables element, we can simulate it into a table cell through display: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 }

• 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;

• Unknown child element width and height——Horizontal and vertical centering

  
  

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

• 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;
        }

For more detailed HTML/css knowledge, please visit

css video tutorialcolumn!

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