元素水平垂直居中的幾種常用方法

阿新 • • 發佈：2018-04-06

round IT spl translate 彈性 lex align mar con

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素水平垂直居中</title>
        <style>
            /*方式一*/
            .box{
                width: 100px;
                height: 100px;
                background: red;
                position 
: absolute;
                top: 50%;
                left: 50%;
                margin-left: -50px;
                margin-top: -50px;
            }
            /*方式二*/
            .box{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute 
;
                top: 50%;
                left: 50%;
                transform: translate(-50px,-50px);
                /*或者transform: translate(-50%,-50%);*/
            }
            /*方式三  技巧*/
            .box{
                width: 100px;
                height: 100px;
                background: red;
                position 
: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin:auto;
            }
            /*方式四  彈性盒*/
            .father{
                display: flex;
                width: 400px;
                height: 400px;
                background: red;
                justify-content: center;
                align-items: center;
            }
            .son{
                width: 100px;
                height: 100px;
                background: aqua;
            }
        </style>
    </head>
    <body>
        <div class="box">我需要用多種方式居中你</div>
        <div class="father">
            <div class="son"></div>
        </div>
    </body>
</html>

元素水平垂直居中的幾種常用方法

round IT spl translate 彈性 lex align mar con <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

css 實現元素水平垂直居中的幾種方法

在做網頁的時候經常會需要讓某一個元素水平垂直居中，而要實現水平垂直居中有很多種方法，不知道你們有沒遇到這種情況：方法倒是知道，甚至還知道許多種，可一到真正用到的時候，卻突然在努力地回想，這或許就是人們經常說的「腦子短路」，所以，這篇文章和大家一起來溫故而知新，梳

css中已知寬高的子元素水平垂直居中的三種方法

元素水平垂直居中三種的方法設定兩個盒子，關係是父與子： <body> <div id="wrap"> <div id="inner">

CSS元素水平垂直居中的方法

垂直 .com put ron spa blank span osi 絕對定位 1. 元素水平居中 1.1 設置父元素的屬性 text-align: center; 說明：此屬性只針對父元素的子元素為內聯元素時有效，比如：img，input，select，but

css垂直居中幾種方法（二）

play spa light dex bsp png ava ems pre 方法1：table-cell .box1{ display: table-cell; vertical-align: middle; text-a

未知寬高元素水平垂直居中方法

CSS未知寬高元素水平垂直居中方法一思路：顯示設定父元素為：table，子元素為：cell-table，這樣就可以使用vertical-align: center，實現水平居中優點：父元素（parent）可以動態的改變高度（table元素的特性）缺點：IE8以下不支援 <style typ

元素水平垂直居中的三種方式

僅水平居中比較簡單：margin:0 auto; 或者：margin:100px auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

元素水平垂直居中的方法

1.父級相對定位，子級絕對定位 .parent{ width: 500px; height: 500px; background: #f00; position: relative; } .child{ width: 300px; height:

塊級元素水平垂直居中方法

一、加padding減height <!DOCTYPE html> <html lang="en"> <head> <meta charset="

未知寬高div水平垂直居中3種方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <!--方法1：一個未知寬高的彈出框，水平垂直居中--&

css設定元素水平垂直居中的方法

看到標題，相信大家並不陌生。這個問題，經常會出現在面試題中。通常會要求面試者寫出幾種方法。那麼，究竟有幾種方法，每種方法的相容情況如何，相信大家很少研究過。今天，我們就一起來看看。通常分為2種情況，已知元素的寬度或未知。我們先說說在已知的情況下，要如何設定。舉例說明：

CSS垂直居中幾種方法

垂直居中佈局很常用到，自己總結下來以後用的話也很方便，算是對自己上網閱讀資料的一個考核 1.不知道自己高度和父容器高度的情況下, 利用絕對定位只需要以下三行： parentElement{ position:relative; } child

元素水平垂直居中

doc div tom 水平 charset ack round ctype style <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit

清除浮動的幾種常用方法

src 添加環繞 blog img eight 方式內聯元素特性首先，浮動這個樣式的出現，僅僅只是為了實現圖文環繞的效果，現在大多時利用浮動來布局；浮動：　　使元素推理文檔流，按照指定方向發生移動；　　遇到父級邊界或者相鄰的浮動元素會停下來；浮動的特性：　

sql 的幾種常用方法

dataview 釋放資源 lose 總結 dap bool .sql res mar 第一個項目總結基類：database：主要是定義有關數據庫的方法: 1.打開數據庫 public static void Open() {

如何讓設置浮動的元素水平垂直居中

CSS未知寬高元素水平垂直居中

use ali lan 並且 css3 優點 left 顯示設置 spl 思路：顯示設置父元素為：table，子元素為：cell-table，這樣就可以使用vertical-align: center，實現水平居中優點：父元素（parent）可以動態的改變高度（table元

PHP實現獲取文件後綴名的幾種常用方法

後綴名 get file cti lower urn rpo info 常用方法方法1： function get_file_type($filename){ $type = substr($filename, strrpos($filename, ".")+1)

javaScript中陣列的幾種常用方法

1.splice(2,3,4)刪除陣列中任意項(三個引數). 2.splice(1,3)刪除從第一項開始的往後三項(兩個引數).(splice可以結合pop(),unshift(),push(),shift()來理解) 3.push()在陣列的末尾增加一項. 4.unshift()在陣列

PHP實現獲取檔案字尾名的幾種常用方法

方法1： function get_file_type($filename){ $type = substr($filename, strrpos($filename, ".")+1); return $type; } 方法2： function get_file_type($filena

元素水平垂直居中的幾種常用方法

相關推薦