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

• margin: vertical auto; ——Horizontal centering

 .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

• Use table——Horizontal and vertical centering

• Flexible layout——horizontal, Vertical centering

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

Copy after login

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

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

Copy after login

• 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%);*/}

Copy after login

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

Copy after login
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!