無論屏幕尺寸如何，將DIV居中放置在頁面中央位置

我希望將下面的div容器放置在頁面中心位置，無論屏幕大小如何。無論屏幕尺寸如何，將DIV居中放置在頁面中央位置

我周圍一點點播放，但似乎失去了一些東西。

2013-08-29 dan4duk

_無論屏幕尺寸如果它還包含手機，也可以使用**媒體查詢**。 – Nitesh

發佈一些HTML/CSS或者其他無人知曉的問題... –

看這個：http：//www.yourinspirationweb.com/en/css-tips-how-to-center-an-element/ – medBo

.center-div { 
    width: 600px; 
    height: 600px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -300px; 
    margin-top: -300px; 
}

這將使您的DIV在水平和垂直方向上以center-div爲中心。 margin-left必須是寬度的負值的一半。 margin-top必須負一半高度。

如果只想水平居中：在你的CSS居中的東西，無論頁面寬度爲margin: auto;

.center-div { 
    width: 600px; 
    height: 600px; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2013-08-29 12:28:09 FastTrack

最簡單的方式，高度和寬度定義。

.class { 
    height: 50px; 
    width: 50px; 
    margin: auto; 
}

的jsfiddle：http://jsfiddle.net/rVXBH/

來源

2013-08-29 12:32:14 Tricky12

這個問題的解決方案是在CSS中使用auto爲margin並提供一些寬度與DIV本身：

div.centered { 
margin-left:auto; 
margin-right:auto; 
width:80%; 
}

來源

2013-08-29 12:35:32

這是一個偉大的方法，我用，它使用選擇器之前的創建一個不可見的div來處理垂直對齊：

HTML：

<body> <div id="outter-div"> <div id="aligned"> <h1>A Nice Title</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p> </div> </div> </body>

CSS：

/* This parent can be any width and height */ #outter-div { text-align: center; } /* The ghost, nudged to maintain perfect centering */ #outter-div:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } /* The element to be centered, can also be of any width and height */ #aligned{ display: inline-block; vertical-align: middle; width: 300px; }

這可以在this post其中也有對jsbin演示中找到！

來源

2013-08-29 12:40:23 fditz