CSS实现水平垂直居中小结

水平居中

水平居中实现只要设置margin:0 auto;就可以实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>水平居中</title>
        <style type="text/css"> #box{width: 200px;height: 200px;background: red;margin: 0 auto;} </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
</html>

垂直居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中</title>
        <style type="text/css"> #box{ width: 200px;height: 200px;background: red;position:absolute;top:50%;margin-top: -100px; } </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
</html>

CSS实现水平垂直居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>css实现水平垂直居中</title>
        <style type="text/css"> .box{ /* 负边距+定位:水平垂直居中(Negative Margin) 使用绝对定位将content的定点定位到body的中心,然后使用负margin(content宽高的一半), 将content的中心拉回到body的中心,已到达水平垂直居中的效果。 */ width:200px; height:200px; background: red; position: absolute; top: 50%; left: 50%; margin-left:-100px; margin-top: -100px; } </style>
    </head>
    <body>
    <div class="box"></div>
    </body>
</html>

CSS实现水平垂直居中(法2)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中布局</title>
        <style type="text/css"> html,body{ width: 100%;height: 100%;margin: 0;padding: 0; } #box { width: 300px; height: 300px; background: red; margin: 0 auto; /*水平居中*/ position: relative;/*相对自己当前进行定位*/ top: 50%; margin-top: -150px; } </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
</html>

CSS3实现垂直水平居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS3实现垂直水平居中</title>
        <style type="text/css"> #div1{ width: 200px;height: 200px;background: red; top: 50%; left: 50%; position: absolute; transform: translate(-50%,-50%); /* 这里我们使用css3的transform来达到类似效果 */ } </style>
    </head>
    <body>
    <div id="div1"></div>
    </body>
</html>

CSS3 flex实现元素的垂直居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>垂直居中布局</title>
        <style type="text/css"> html,body{ width: 100%;height: 100%;margin: 0;padding: 0; } body{ display: flex;align-items: center;justify-content: center; } #box{ width: 200px;height: 200px;background: red; } </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
</html>

浮动元素居中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>如何居中一个浮动元素</title>
        <style type="text/css"> .p{ position: relative; float: left; left:50%; border: 1px solid red; } .c{ position: relative; float: left; right: 50%; } </style>
    </head>
    <body>
    <!-- 父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。 相对定位元素的定位是相对其正常位置。 -->
    <div class="p">
    <h1 class="c">居中浮动元素</h1>
    </div>
    </body>
</html>

你可能感兴趣的:(css,css布局)