Heim > Artikel > Web-Frontend > CSS 实现垂直居中的几种方案_html/css_WEB-ITnose

CSS 实现垂直居中的几种方案_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:15:341231Durchsuche

最近在学关系型数据库相关，MySQL 和 Postgre,捎带着学了 PHP，为了练手这几天就忙着自己搭博客，项目部署在某云上，该云算是良心，给的空间自己搭博客用足够了。本来想着每日一bo的,所以有的时候实在来不及就只能隔天更新了。以后尽量发点东西出来，等博客搭完写一写 SQL 数据库基础相关的分享，给跟我一样的小白道友们做下参考，大神请直接无视~

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

方式一：table 布局方法

直接上?：

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

效果：

分析

优点：content 高度可以动态改变，无须担心父级容器高度不够被截断；

缺点：IE8 还没搞定。　　

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

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

    </style><br /><br />    <div class="container"><br />        <div class="content"><br />            <div class="point"><br />                point goes here.<br />            </div><br />        </div><br />    </div><br /></body><br /></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;

就先写这么多吧，先吃饭去啦~

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS太阳月亮地球三角恋旋转效果_html/css_WEB-ITnoseNächster Artikel：HTML&CSS基础学习笔记1-简单网页中有哪些标签？_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen