Distal to combat development entry: 2 div commonly used method to achieve vertical and horizontal centered css

method one:

Using vertical-align: middle performed centrally aligned in the vertical direction, need to meet the conditions of the process:

Set the parent element line-height line height equal to the height of the parent element height
Child element row must be within the block-level elements display: inline-block;
Set child element vertical-align: middle
This method can not be floating right under development (not on the right)

Below is the complete code, can create an HTML file for testing (green box):

<html>
<head>
<title>导航条</title>
<meta charset="utf-8" />
</head>

<style>

*{
    margin:0;
    padding:0;
}

.div1{
  height:200px;
  background:yellow;
  /*行高等于容器高度*/
  line-height:200px;
}

.div2{
    width:100px;
    height:100px;    
    background:green;
    /*行内块级元素*/
    display:inline-block;
    /*中线和父元素基线上方出对其，参考字母"x"*/
    vertical-align:middle;
}

.div3{
    width:100px;
    height:100px;    
    background:red;
    display:inline-block;
}

</style>
<body>

<div class="div1">
xxxxxxxxxxx
    <div class="div2" >
    </div>
    <div class="div3" >

    </div>
</div>

</body>
</html>

To help make learning easy, efficient and free for everyone to share a large number of resources to help you become the front-end engineers, and even the way through the clutter full stack engineers. We are here to recommend a full-stack Learning Exchange front-end circle: 784783012 Welcome to flow into ××× discussion, learning exchanges and common progress.
When the real beginning of learning will inevitably do not know where to start, leading to inefficiencies affect confidence to continue learning.
But the most important thing is I do not know what needs to master key technologies, frequently stepped pit learning, end up wasting a lot of time, it is effective or necessary resources.

Learning the front, we are serious

Method Two:

This method is more violence, the use of location solution:

The parent element is turned relative positioning
Sub-element absolute positioning
Downward movement of the first subelement 50% of the parent element, in which case the top line of the parent element of the child element is aligned with
Child element itself is moved upward again half the height "height", in which case the neutral line of the parent element and the child element is aligned with the
This method may be right-aligned, sub-elements disposed right: 0px; to

Below is the complete code, can create an HTML file for testing (green box):

<html>
<head>
<title>导航条</title>
<meta charset="utf-8" />
</head>

<style>

*{
    margin:0;
    padding:0;
}

.div1{
  height:200px;
  background:yellow;
  /*相对定位开启*/
  position:relative;
}

.div2{
    width:100px;
    height:100px;    
    background:green;
    /*绝对定位*/
    position:absolute;
    /*可以右对齐*/
    right:0px;
    /*先向下移动父元素的50%，此时子元素的顶部与父元素的中线对齐了*/
    top:50%;
    /*再向上移动自身高度"height"的一半，此时子元素的中线和父元素的中线对齐了*/
    margin-top:-50px
}

</style>
<body>

<div class="div1">
    <div class="div2" >
    </div>
</div>

</body>
</html>