Article From:https://www.cnblogs.com/sunmarvell/p/9123698.html

Vertical center

Method 1

This method takesdiv The display mode is set to form, so we can use the form of the table.vertical-alignProperty.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vertical center</title>
    <style type="text/css">
    body{
        background:#ccc;
    }

        #wrapper {
            display: table;    /*here*/
            background:blue;
        }
        
        #container {
            display: table-cell;       /*here*/       
            vertical-align: middle;    /*here*/
            background: yellow;
            height:300px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="container">
            <p>I want to use the table property to center in the middle</p>
            <p>I want to use the table property to center in the middle</p>
            <p>I want to use the table property to center in the middle</p>
        </div> 
    </div> 
</body>
</html>

 

Implementations are as follows:

Can be in the vertical in itself;

Advantage:

container You can change the height dynamically (no need to define it in CSS). Whenwrapper When there is not enough space in it,container Will not be truncated

Shortcomings:

Internet Explorer(Even IE8 is invalid, and many nested tags are actually good.

Method two

This method uses absolute positioningdivtop Set up as a50%, margin-top Set toNegativecontent height。This means that the object must be in the CSSSpecified fixed height

Because there’s a fixed height, maybe you want to give it to you.content Designateoverflow:auto,If so,content Too much, there will be a scroll bar, lestcontent Spillover.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>Vertical center</title>
    <style type="text/css">
    body{
        background: #ccc;
    }
     #container {
    position: absolute;
    top: 50%;
    height: 200px;
    margin-top: -100px; /* negative half of the height */
    background: yellow;
}
    </style>
</head>

<body>
        <div id="container">
            <p>I want to use absolute positioning in the vertical</p>
            <p>I want to use absolute positioning in the vertical</p>
            <p>I want to use absolute positioning in the vertical</p>
        </div> 
</body>
</html>

Design sketch:

It is perpendicular to the parent element;

Advantage:

  • Applicable to all browsers
  • No nested tags need not be needed

Shortcomings:

  • When there is not enough space,content It will disappear (similar)div At the same timebody Inside, when the user shrinks the browser window, the scroll bar does not appear.

Method three

This is a method used in this method.position:absolute,A fixed width and heightdiv。Itdiv Be set up astop:0; bottom:0;。But because it has a fixed height, it can not be separated from the top and bottom 0.margin:auto;It will keep it in the middle. Usemargin:auto;It is simple to make block – level elements vertically

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vertical center</title>
    <style type="text/css">
        body{
            background: #ccc;
        }
     #container {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        height: 200px;
        background: yellow;
        /*width: 70%;*/
    }
</style>
</head>

<body>
    <div id="container">
        <p>I want to use absolute positioning in the vertical</p>
        <p>I want to use absolute positioning in the vertical</p>
        <p>I want to use absolute positioning in the vertical</p>
    </div>
</body>
</html>

Design sketch:

Method four: vertical text of single line text

This method can only be placed in a single line text. It’s just a simple thing to do.line-height Set up as the objectheight Value isThe text can be in the middle.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vertical center</title>
    <style type="text/css">
        body{
            background: #ccc;
        }
     #container {
        height: 100px;
        line-height: 100px;
        background: yellow;
        /*width: 70%;*/
    }
</style>
</head>

<body>
    <div id="container">
        <p>I want to use absolute positioning in the vertical</p>
    </div>
</body>
</html>

Design sketch:

 

 

horizontally

Method 1:Inner element level in line

It is only necessary to wrap the elements inside the row into a parent element of display whose attribute is block, and add the following properties to the parent layer element:

.parent {
    text-align:center;
}

Examples:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Middle element level in fixed width</title>
<style>
div{
    border:1px solid red;
    margin:20px;
}
div.txtCenter,div.imgCenter{
    text-align:center;
}

</style>
</head>

<body>
<div class="txtCenter"><span style='background: #ccc;'>I am the text, ha ha, I want to display horizontally in the parent container.</span>
<span>I am also an inner element</span>
</div>
<div class="imgCenter"><span>The picture is the inner block element</span></div>
<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
</body>
</html>

Design sketch:

Method two: the middle level of the fixed broad lump element is in the middle

The elements that satisfy the two conditions of fixed width and block can be centered by setting the “left and right margin” value as “auto”.

 

.item {
    margin: 10px auto;
}

Examples:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Horizontal central element with fixed width</title>
<style>
body{
    background: #ccc;
}
div{
    border:1px solid red;
    width:200px;
    margin:20px auto;
}

</style>
</head>

<body>
<div>I am a block width element. I want to display it horizontally.</div>
</body>
</html>

Design sketch:

 

Method three: indefinite wide blocky elements are horizontally centered (multiple lump elements in the middle).

Set the display property of the element to inline-block, and set the text-align attribute of the parent element to center:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>The middle level of an indefinite broad lump element</title>
<style>
.container{
    text-align:center;
    background: #ccc;
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline-block;
}
.container li{
    margin-right:8px;
    display:inline-block;
}
</style>
</head>

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
</html>

Design sketch:

Method three: the level of an indefinite broad lump element is in the middle

Using the length adaptivity of the table tag – that is, the length of the parent element does not depart from the length of the parent element body (the length of the table is determined by the length of the text within it), so it is possible to see as a fixed width block element and then use the method of the fixed width block centered margin.Its level is in the middle.

.parent{
  display:table;
  margin:0 auto;
}

Examples:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>The middle level of an indefinite broad lump element</title>
<style>
.parent,.wrap{
  display:table;
  margin:0 auto;
}
.parent{
background:yellow;
}
.wrap{
    background:#ccc;
}
</style>
</head>

<body>
<div class='parent'>
    
        <p>I'm the first line of text</p>
        <p>I'm the second line text</p>
        <p>I'm the third line text</p>
</div>

<div class="wrap">
  Set the level of my div container in the middle</div>
</body>
</html>

Design sketch:

Method four: the level of an indefinite broad lump element is in the middle

 Setting float by giving the parent element,Then set the parent element position:relative and left:50%,Subelement setting position:relative and left: -50% To achieve the level of the middle.

.container{
    float:left;
    position:relative;
    left:50%
}
.container ul{ 
    position:relative;
    left:-50%;
}

Examples:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>The middle level of an indefinite broad lump element</title>
<style>
.container,.wrap{
    float:left;
  position:relative;
  left:50%
}



body{
  background: #ccc;
}
.container ul,.wrap-center{
  background:yellow;
  margin:0;
  padding:0;
  position:relative;
  left:-50%;
}
ul,li{
  list-style: none;
}
a{
  text-decoration:none;
}
.wrap{
    clear:both;
    }
</style>
</head>

<body>
<div class="container">
  <ul>
      <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

<!--The following is the code task area-->
<div class="wrap">
    <div class="wrap-center">Let's learn this method.</div>
</div>
</body>
</html>

Design sketch:

 

 

 

 

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *