Centered vertically and horizontally centered

It was originally set up to own center alignment, instead of setting attributes outside of the container

<!DOCTYPE html>
<html>
    <head>
        <title>
            Align
        </title>
        <style>
        .center {
            margin: auto;
            width: 60%;
            border: 3px solid #73AD21;
            padding: 10px;
       }
        </style>
    </head>
    <body>
        <div>
            <div class="center">
                <p><b>注意: </b> Use margin: auto is not compatible IE8, unless it has been declared DOCTYPE!. </ P > 
              </ div > 
        </ div > 
    </ body > 
</ HTML >

Note: If no width attribute (or set to 100%), centered will not work.

Justify - with float mode

We can also use the float property to align elements:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>
<body>

< H2 > right-aligned </ H2 > 
< P > The following examples demonstrate the use of the float property right alignment achieved: </ P >

< Div class = "right" > 
  < the p- > I give some of my father's life recommendation in childhood, I still memorable. </ P > 
</ div >

</body>
</html>

When the alignment elements such as, for the outer and Padding <body> element is a predefined good idea. Such visible differences can be avoided in different browsers.

Note: If the child element is greater than the height of the parent element and the child element is set to float, then the child element will spill, this time you can use the " clearfix (Clear float)" to solve the problem.

We can add on the parent element overflow: auto; overflow to solve the problem of sub-elements:

.clearfix {
    overflow: auto;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div {
    border: 3px solid #4CAF50;
    padding: 5px;
}

.img1 {
    float: right;
}

.clearfix {
    overflow: auto;
}

.img2 {
    float: right;
}
</style>
</head>
<body>

< P > The following examples in the parent element of FIG overflow, very beautiful: </ P >

< Div > 
< img class = "img1" src = "pineapple.jpg" alt = "Pineapple" width = "170" height = "170" > 
rookie Tutorial - learn not only technical, but also dream! ! ! </ Div >

< P style = "Clear: right" > in the parent element by adding clearfix class, and set overflow: auto; to solve this problem: </ P >

< Div class = "clearfix" > 
< img class = "img2" src = "pineapple.jpg" alt = "Pineapple" width = "170" height = "170" > 
rookie Tutorial - learn not only technical, but also dream ! ! ! </ Div >

</body>
</html>

Reference: https:? //Www.runoob.com/try/try.php filename = trycss_layout_clearfix

Vertically centered - the use of padding

CSS There are many ways to implement vertically centered. A simple way is to use the top of the head padding:

Vertical center - using the line-height

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/ * If multiple lines of text, add the following code: * /
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

Vertical center - the use position and transform

In addition to the use of padding and the line-height attribute, we can use the transform property to set the vertical center:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</style>
</head>
<body>

< H2 > centrally </ H2 > 
< P > of the following examples, we used the transform and positioning properties to set the horizontal and vertical center: </ P >

< Div class = "Center" > 
  < the p- > I is centered horizontally and vertically. </ P > 
</ div >

< The p- > Note: IE8 and earlier versions do not support transform property. </ P >

</body>
</html>

Reference: https: //www.runoob.com/css/css-align.html