css div上下左右自適應居中

1.登入框上下左右自適應居中

以前想要把登入表單始終放置在頁面的中間，花了不少心思，一直以來用的解決方法都是用js，感覺有點麻煩不是很好，於是在網上查詢了一下發現了一種比較的實現方法。

原理就是用position:absolute,然後用left：50%，top：50%，現在登入表單左側直角是在頁面的中間了，但是登入框本身還有寬度和高度，所以我們再用margin-left:-登入框寬度，margin-top：-登入框高度，就可以讓登入框顯示在頁面的正中間了。

這是登入框

很多問題的解決方法都不止一種，還是要多學習多交流啊。

2.左右布局，左側固定寬度，右側自適應寬度

原理就是左側div固定寬度+float，然後右側的div設定左間隔左側div寬度的距離就可以了（margin-left:左側div的寬度）

<

style 
type
="text/css"
>
html, body 
.container 
.container .west 
.container .content 
style
>
<
div 
class
="container"
>
<
div 
class
="west"
>west
div>
<
div 
class
="content"
>content
div>
div>

3.利用translate(-50%, -50%)居中(紅色為關鍵部分)

position: fixed;

min-width: 100px;

color: #fff;

border-radius: 2px;

background-color: rgba(0, 0, 0, 0.6);

padding: 10px 5px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

css div上下左右居中

通常我們用到的css布局都是左右居中，經典css寫法如下 body div 上面是經典的左右居中的css寫法，那麼像登入框那些比較小得div塊只是左右居中是否不是太美觀，如果上下左右都居中這是 body div上面的margin可以合併 margin 250px 0 0 250px 大概原理就是 布...

CSS 上下左右居中筆記

結果 2.彈性盒子flex justify content 內容對齊,屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線 main axis 對齊。justify content flex start flex end center space between space around align ...

CSS居中小談 上下左右居中

水平居中設定 行內元素 設定 text align center flex布局 設定display flex justify content center 靈活運用，注意相容性和字首 垂直居中設定 父元素高度確定的單行文字 內聯元素 設定 line height height 父元素高度確定的多行文...