CSS elements are centered horizontally vertically

First, Text-align:center;vertical-align:middde;

HTML section

<class= "parent">    <class= " Child ">    </div></Div >

CSS Section

. Parent{width:400px;Height:400px;background:#666666;text-align:Center;font-size:0px; }. Child{font-size:16px;background:#ccc;Display:Inline-block;vertical-align:Middle; }. Parent:after{content:"';width:0;Height:100%;Display:Inline-block;vertical-align:Middle; }/*. add{width:0;         height:100%;         Display:inline-block;    Vertical-align:middle; }*/

You can also write a span class to add tag after the child's div without the pseudo element after.

font-size:0px: Resolves a problem where the word inside the child element exceeds the vertical center of a line.

　　

Second, positioning top left right bottom margin:auto to achieve;

CSS elements are centered horizontally vertically