Summary of CSS vertical centering

高洛峰
Release: 2017-02-27 15:15:22
Original
1199 people have browsed it

Foreword: This is the author’s own understanding and organization after studying. If there are any errors or questions, please correct me and I will continue to update!

Vertical centering is used in many places and there are many solutions.

Known element width You can use position positioning + negative margin method

Absolute positioning + 0px in all 4 directions + margin: auto You can achieve horizontal centering based on the parent container; if you only need vertical centering, you can delete left and right, and there are many methods of horizontal centering.
Absolute positioning + left 50% + margin left: a negative value of half the width It can be horizontally centered, the right can also be
absolute positioning + top 50% + margin top: a negative value of half the height can be vertically centered, and the bottom can also be

Summary of CSS vertical centering


<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 500px;
                height: 500px;
                background: #f90;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                position: absolute;
                margin: auto;
                /*绝对定位 + 4个方向全部0px + margin:auto 可以做到基于父容器水平垂居中*/
                /*如果只需要垂直居中,那可以把left和right删掉,并且水平居中的方法也很多*/
            }
            .content{
                width: 100px;
                height: 200px;
                background: #0f8;
                position: absolute;
                /*position: absolute基于第一个不是position:static的父级元素定位*/
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -100px;
                /*绝对定位 + 左50% + margin左:宽度一半的负值 可以做到水平居中  右也可以*/
                /*绝对定位 + 上50% + margin上:高度一半的负值 可以做到垂直居中  底部也可以*/
            }
        </style>
    </head>
    <body>
        <p class="wrapper">
            <span class="content"></span>
        </p>
    </body></html>
Copy after login


View Code

Unknown element width You can use position positioning + transform:translate (x, y) to move
Absolute positioning + upper 50% + lower 50% + transform:translate (-50%, -50%) to achieve vertical centering


<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .wrapper{
                width: 500px;
                height: 500px;
                background: #f90;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                position: absolute;
                margin: auto;
                /*绝对定位 + 4个方向全部0px + margin:auto 可以做到基于父容器水平垂居中*/
                /*如果只需要垂直居中,那可以把left和right删掉,并且水平居中的方法也很多*/
            }
            .content{
                width: 100px;
                height: 200px;
                background: #0f8;
                position: absolute;
                /*position: absolute基于第一个不是position:static的父级元素定位*/
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                /*transform变化、使...变形、转换;transform属性应用于元素的2D或3D转换。这个属性允许你将元素移动,旋转,缩放,倾斜*/
                /*translate平移,是transform的属性值的一部分*/
                /*transition过渡、转变;可多个样式的变换效果*/
            }
        </style>
    </head>
    <body>
        <p class="wrapper">
            <span class="content"></span>
        </p>
    </body></html>
Copy after login



##The img image in p is vertically centered :

You can use vertical-align:middle, but this attribute only works on elements of the inline-block type (inline also has an impact). I have to continue to learn about vertical-align. I welcome your corrections.

Summary of CSS vertical centeringMethod 1: Image vertical-align:middle + the height of the parent element is consistent with the line-height


<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;margin: 0;
            }
            .wrapper{
                height: 300px;
                line-height: 300px;
                width: 300px;
                margin:100px auto;
                background: #f90;
                text-align: center;
            }
            .wrapper img{
                width: 150px;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <p class="wrapper">
            <img src="images/1.jpg" alt="美女" title="美女"/>
        </p>
    </body></html>
Copy after login


View Code

Method 2: Parent element settings display: table-cell and vertical-align


<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;margin: 0;
            }
            .wrapper{
                width: 300px;
                height: 300px;
                background: #f90;
                text-align: center;
                vertical-align: middle;
                display: table-cell;
            }
            .wrapper img{
                width: 150px;
            }
        </style>
    </head>
    <body>
        <p class="wrapper">
            <img src="images/1.jpg" alt="美女" title="美女"/>
        </p>
    </body></html>
Copy after login
For more articles related to the summary of css vertical centering, please pay attention to the PHP Chinese website!



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!