如何居中一个div?

时间：2016-08-20 10:04:39 阅读：243 评论：0 收藏：0 [点我收藏+]

标签：

说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是微笑今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？

方式一：table 布局方法

直接上??：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .container{
        width: 200px;
        height: 200px;
        font-weight:bold;">deepskyblue;
        display: table;
    }
    .cell{
        display: table-cell;
        vertical-align: middle;
        font-weight:bold;">lawngreen;
    }
    .content{
        font-weight:bold;">yellow;
    }
</style>
    <div class="container">
        <div class="cell">
            <div class="content">
                Content
            </div>
        </div>
    </div>
</body>
</html>

效果：
分析
- 优点：content 高度可以动态改变，无须担心父级容器高度不够被截断；
- 缺点：IE8 还没搞定。

方式二：布局对象固定高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vertical-center</title>
</head>
<body>
    <style>
        .container{
            width: 200px;
            height: 200px;
            
            position: relative;
            text-align: center;
            display: table;
        }
        .content{
            width:100px;
            height: 100px;
            
            position: absolute;
            top:50%;
            margin-top: -50px;
　　　　     left:50%;
　　        margin-left:-50px;  
        }
        .point{
            width:50px;
            height: 50px;
            position: absolute;
            top: 50%;
            margin-top: -25px;
            left:50%;
            margin-left:-50px;
            
        }

    </style>

    <div class="container">
        <div class="content">
            <div class="point">
                point goes here.
            </div>
        </div>
    </div>
</body>
</html>

就这样，我们实现了垂直和水平的居中

上面提到的方法，都有局限性，下面介绍一种通用的方法，不过是 CSS3实现的，但是通用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>haorooms不固定高度div写法</title>

    <style>
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #000;
  width:50%;
  height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}


    </style>
</head>
<body>
    <div class="center"></div>
</body>
</html>

看吧，我们只是吧 margin 变成translate，其他浏览器的写法如下：

-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;

如何居中一个div?

标签：

原文地址：http://www.cnblogs.com/yangmengsheng/p/5789665.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行