Common layout for HTML CSS

First, the pages are divided into large, structured areas, such as containers, headers, content areas, and footers;

Then the content area of the city, the establishment of grid structure, analysis of page structure

Finally, the design structure in each content area, determine the page layout.

1. Center Horizontally

Using Display:inline and Text-align

   /*.parent {        text-align:center;    }    . Child {        display:inline-block;    } */

Using margin:0 Auto Settings

. Child {        width:300px;        margin:0 Auto;    }

Using Table implementation

. child{display:table; margin:0 Auto;}

Use absolute positioning

. parent{position:relative;}. Child{position:absolute; left:50%; transform:translate (-50%);}

Using Flex layouts

/* First method */.parent{display:flex; justify-content:center;} /* The second method */.parent{display:flex;}. child{margin:0 Auto;}

HTML code:

<body>    <div class= ' parent ' >        <div id= ' child ' class= ' child ' >            <p> Test: Test.. 111</p>        </div>    </div></body>

2. Center vertically

Vertical-align

Only one element is either inline or Inline-block (Table-cell can also be interpreted as inline-block level), and the Vertical-align attribute on its body will work.
When using vertical-align, it is necessary to set the Line-height or set Display:table-cell because the alignment baseline is used as the baseline for the row height.

/*1*/.parent{display:table-cell;vertical-align:middle;height:20px;} /*2*/.parent{display:inline-block;vertical-align:middle;line-height:20px;}

Absolute positioning

. parent{position:relative;}. Child{positon:absolute; top:50%; transform:translate (0,-50%);}

Flex implementation

. Parent{display:flex; align-items:center;}

3. Horizontal Vertical Center

Vertical-align text-aling Inline-block

. Parent{display:table-cell; vertical-align:middle; text-align:center;}. Child{display:inline-block;}

Absolute positioning

. parent{position:relative;}. Child{position:absolute;top:50%;left:50%;transform:translate ( -50%,-50%);}

Flex implementation

. Parent{display:flex;justify-content:center;align-items:center;}

These are just single-column layouts.

Common layout for HTML CSS