CSS 實現(xiàn)垂直居中的幾種方法(必看)

最近在學(xué)關(guān)系型數(shù)據(jù)庫相關(guān),MySQL 和 Postgre,捎帶著學(xué)了 PHP,為了練手這幾天就忙著自己搭博客,項目部署在某云上,該云算是良心,給的空間自己搭博客用足夠了。本來想著每日一bo的,所以有的時候?qū)嵲趤聿患熬椭荒芨籼旄铝?。以后盡量發(fā)點東西出來,等博客搭完寫一寫 SQL 數(shù)據(jù)庫基礎(chǔ)相關(guān)的分享,給跟我一樣的小白道友們做下參考,大神請直接無視~
說到居中,很多人第一反應(yīng)應(yīng)該是水平居中,說到水平居中,肯定道友們有一萬種方法做到,CSS3 的FlexBox更是強大到?jīng)]朋友。但是良辰今天想聊的是 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>
效果:

•分析
•優(yōu)點:content 高度可以動態(tài)改變,無須擔(dān)心父級容器高度不夠被截斷;
•缺點:IE8 還沒搞定?! ?/p>
•方式二:布局對象固定高度
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>vertical-center</title>
- </head>
- <body>
- <style>
- .container{
- width: 200px;
- height: 200px;
- background-color: #003366;
- position: relative;
- text-align: center;
- display: table;
- }
- .content{
- width:100px;
- height: 100px;
- background-color: yellow;
- 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;
- background-color: green;
- }
- </style>
- <div class="container">
- <div class="content">
- <div class="point">
- point goes here.
- </div>
- </div>
- </div>
- </body>
- </html>
•就這樣,我們實現(xiàn)了垂直和水平的居中

上面提到的方法,都有局限性,下面介紹一種通用的方法,不過是 CSS3實現(xiàn)的,但是通用。
- <!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; 就先寫這么多吧,先吃飯去啦~
以上這篇CSS 實現(xiàn)垂直居中的幾種方法(必看)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
原文地址:http://www.cnblogs.com/Slim-Shady/archive/2016/06/13/5582324.html
相關(guān)文章
- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法,有興趣的可以了解一下。2016-12-19
- 這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-17
利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個小節(jié)的內(nèi)容,其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局,有需要的可以參考2016-09-12- 這篇文章給大家演示了在不知道高度的情況下圖片如何垂直居中對齊,文中給出了實例代碼,有需要的朋友們可以參考借鑒。下面來一起看看吧。2016-09-12
深入理解CSS行高line-height與文本垂直居中的原理
本文詳細(xì)介紹了CSS行高屬性line-height與文本垂直居中的原理,通過本文的介紹相信對大家以后使用line-height和設(shè)置文本垂直居中會更加熟練,有需要的可以參考借鑒。下面一2016-08-12Flexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例
下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-27CSS設(shè)置DIV垂直居中的N種方法 兼容IE瀏覽器
這篇文章主要為大家詳細(xì)介紹了兼容IE瀏覽器CSS設(shè)置DIV垂直居中的N種方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-05- 這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié),包括多行文本垂直居中,單行文本垂直居中,子div垂直居中,感興趣的小伙伴們可以參考一下2016-07-04
CSS在固定寬高的div內(nèi)實現(xiàn)垂直居中的實例詳解
這篇文章主要介紹了CSS在固定寬高的div內(nèi)實現(xiàn)垂直居中的實例詳解,即在div內(nèi)部元素相對于div垂直居中的方法,需要的朋友可以參考下2016-06-03- 在前端布局過程中,我們實現(xiàn)水平居中比較簡單,一般通過margin:0 auto;和父元素 text-align: center;就能實現(xiàn)。今天小編給大家?guī)砹薈SS實現(xiàn)垂直居中的幾種方法小結(jié),感興2019-05-14