絕對定位元素的水平垂直居中的方法（3種任選）
發(fā)布時間：2016-12-23 14:42:22 作者：sqq523970301 
我要評論
我要評論本文主要介紹了絕對定位元素的水平垂直居中的方法，有3種方法可供參考，需要的朋友一起來看下吧
1.css實(shí)現(xiàn)居中
缺點(diǎn)：需要提前知道元素的寬度和高度。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%; top: 50%;
border:1px solid #000;
background:red;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 寬度的一半 */
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2、css3實(shí)現(xiàn)水平垂直居中
注意：無論元素的尺寸是多少，都可以居中。不過IE8以上才兼容這種寫法，移動端可忽略。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
border:1px solid #000;
background:red;
transform: translate(-50%, -50%); /* 50%為自身尺寸的一半 */
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
3、margin：auto實(shí)現(xiàn)居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border:1px solid #000;
background:red;
margin: auto; /* 有了這個就自動居中了 */
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。2016-12-19
大家在使用excel表格進(jìn)行工作的時候，總會遇到一個問題，那就是我們輸入數(shù)字的時候，當(dāng)你換行輸入其他的數(shù)字以后，這個單元格中的數(shù)字就會自動靠左，怎樣設(shè)置其居中呢？那2016-11-27- 這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-17
利用CSS3的flexbox實(shí)現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實(shí)現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡單實(shí)例
下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-27- ppt表格中的文字怎么設(shè)置水平居中或垂直居中？ppt制作了表格，發(fā)現(xiàn)表格總輸入的文字是左對齊和頂部對齊的，現(xiàn)在想讓文字垂直居中對齊，該怎么設(shè)置呢？下面我們就來看看詳細(xì)2016-05-10
淺析CSS實(shí)現(xiàn)水平垂直同時居中的5種思路
下面小編就為大家?guī)硪黄獪\析CSS實(shí)現(xiàn)水平垂直同時居中的5種思路。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-28- 下面小編就為大家?guī)硪黄孌IV水平垂直居中的兩種完美方法推薦。一起跟隨小編過來看看吧。希望給大家一個參考2016-03-15
- 這篇文章主要介紹了CSS解決頁面圖片水平垂直居中問題的方法,文中給出了三種方案而無需依賴JavaScript,需要的朋友可以參考下2016-03-10
全面總結(jié)使用CSS實(shí)現(xiàn)水平垂直居中效果的方法
這篇文章主要介紹了使用CSS實(shí)現(xiàn)水平垂直居中效果的方法的總結(jié),涵蓋了從最原始的高度設(shè)置到令人興奮的CSS3的Flexbox方式,非常全面,十分推薦!需要的朋友可以參考下2016-03-10
