css中absolute使用，用position和transform是div裡面的div垂直居中

阿新 • • 發佈：2019-01-21

我以前看的一本書上是這麼寫的如果一個div的position屬性為absolute那麼這個div不會受頁面的其他元素影響，直接基於頁面定位這是錯誤的。看w3c，用google查positon absolute ,別用百度翻譯的不準。介紹網址點選開啟連結

其中一句話

absolute

The element is positioned relative to its first positioned (not static) ancestor element

一.解釋absolute用法。

解釋:這個元素的定位是相對於第一個postiion屬性不是static的父類元素定義的

例子:頁面

html程式碼:

<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" value="hanghang"/>
    <link type="text/css" rel="stylesheet" href="pc/customer/css/frame.css">
    <script type="text/javascript" src="pc/customer/js/common.js"></script>
    <title>愛家樂</title>
</head>
<body>
<div id="top">
    <div id="topbody" style="margin: 0 auto">
        <p class="left">

            <span id="favorite">
                <img src="pc/customer/image/favorite.png">
                <a href="javascript:void(0)" onclick="addFavorite()">收藏本站</a></span>
        </p>
        <p class="right" id="topRight">
            <!--你好要改成人名-->
            你好，歡迎光臨本店！
            <span id="loginInfo"><a href="">登入</a><small>|</small><a href="">免費註冊</a></span>
            <!--<span id="loginInfo"><a href="">退出</a><small>|</small><a href="">免費註冊</a></span>-->
        </p>
    </div>
</div>
<div id="header">
    <div id="headerLeft">
        <div class="logoImage"></div>
        <div class="logoFont">愛家樂</div>
    </div>
    <div id="headerMiddle"></div>
    <div id="headerRight"></div>
</div>
<div id="nav">

</div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>

關鍵css:

#header {
    position: relative;
    height: 80px;
}

#headerLeft {
    border: solid 2px black;
    float: left;
    /*vertical-align: middle;*/
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-left: 10%;
    height: 50%;
    width: 10%;
}

.logoImage {
    float: left;
    border: solid 2px black;
    position: relative; /*在float中必須relative*/
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 50%;
    width: 20%;
}

其中id為leftHeader的div設定的position屬性為absolute,top為50%這個是相對他的設有 position:relative父標籤來定位的。

二.垂直居中:

設定

position: relative; /*在float中必須relative*/
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

就可以垂直居中了支援IE9以上解析

還有一種簡單的方式裡面的div的css的style為

 margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

相容ie8

相關div的文字垂直居中點選開啟連結

css中absolute使用，用position和transform是div裡面的div垂直居中

我以前看的一本書上是這麼寫的如果一個div的position屬性為absolute那麼這個div不會受頁面的其他元素影響，直接基於頁面定位這是錯誤的。看w3c，用google查posi

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

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

全域性作用域中，用const和let宣告的變數去哪了？

用const和let宣告的變數，不會存在window物件中大家都知道在全域性作用域中用var宣告的變數，儲存在window物件中但是用ES6的const或者let在全域性作用域中宣告的變數，卻不在window物件中那這個全域性變數abc

CSS 中 px，em和rem 的區別學習筆記

簡單講，px是絕對單位，em和rem是相對單位。px大家都熟悉，這裡主要討論em和rem。現在有以下一個段落： <p>當斧頭來到樹林的時候，好多樹都說，至少<span>它的手柄</span>是自己人</p>

關於面向物件程式設計中很多人用get()和set()方法，而不用public的一點總結

在很多程式中，都喜歡定義一個privata變數，然後為這個私有變數加上get（），set（）方法。那為什麼不直接定義一個public變數呢？這樣做到底有什麼好處和意義呢？難道真的僅僅只是為了程式碼規範？別逗了，不管你信不信，反正我是不信！帶著這個問題我在網上尋找答案，真是眾

在C++中，用new和delete分配和釋放記憶體：

https://www.cnblogs.com/hugongai/p/5833070.html1.例如，給一個4*5的二維陣列分配記憶體方法一：直接申請二維陣列，逐一分配記憶體 1 int **array; 2 //分配記憶體 3 array=new int*[4];

CSS中如果實現元素浮動和清除浮動，看這篇文章就足夠了

浮動基本介紹在標準文件流中元素分為2種，塊級元素和行內元素，如果想讓一些元素既要有塊級元素的特點也同時保留行內元素特點，只能讓這些元素脫離標準文件流即可。浮動可以讓元素脫離標準文件流，可以實現讓多個元素排在同一行，並且可以設定寬高度。其實浮動是通過float屬性來實現的。 float屬性值說明表：

Makefile中怎樣調用python和perl文件為自己提供須要的數據

print erl col shel ria 實例代碼 space shell eight Makefile中怎樣調用python和perl文件為自己提供須要的數據，利用print函數對外輸出數據實例代碼例如以下 perl.pl #!/usr/bin/per

SSM-MyBatis-05：Mybatis中別名，sql片段和模糊查詢加getMapper

接口過程 ase exce bat -c 多次 nts log ------------吾亦無他,唯手熟爾，謙卑若愚，好學若饑------------- 簡單概述一下本講別名，sql片段簡單寫一下，模糊查詢多寫一點一。別名　　 <typeAliases&

Confluence 6 選-項 1 – 在 Confluence 中手動重建用戶和用戶組

Confluence當你只有少量的用戶和用戶組的時候，使用這個方法。使用 Confluence 的系統管理員登錄 Confluence。進入用戶目錄管理界面，然後移動內部目錄（internal directory）到系統中所有目錄的列表的最頂部，通過單擊目錄前方排序的箭頭。請確定在內部目錄中，你至少有一個用

C語言中，當計算字符數組長度時，用sizeof 和strlen 的原理及兩者的區別

指針 data- 編譯器 tracking 行處理 ews csdn 編譯分配字符數組的長度計算：必須以終止符’\0‘作為邊界，但對字符數組賦值時，有兩種方式： 1：定義時用字符初始化（1）char chs[7] = {‘a‘, ‘c‘, ‘0‘, ‘z‘, ‘3

linux——如何搭建samba共享目錄中的，用戶認證共享及匿名用戶共享？（不分系統）

stat config alt 使用 files 設置 set 本地 ive 1.應用場景，搭建sam共享目錄可用於linux以及windows之間 2.服務端ip：192.168.56.11 （A）客戶端ip：192.168.56.133 （B）查看防火墻狀

Eclipse中修改SVN用戶名和密碼方法

int 代碼 cati face 常用 java style ica 選項在用eclipse的時候會經常用到SVN來進行代碼的版本控制，為了方便起見，我們會保存密碼，從此之後就不會再出現輸入或者修改用戶名和密碼的地方了，這時候想切換用戶怎麽辦，在本地操作的一種方法

CSS 中的分離、抽象和層疊

CSS 中的分離、抽象和層疊摘要：LESS和Sass(或者類似方案)從三個方面解決了css存在的問題：分離，抽象和層疊。當我在接受他們時，我發現css還有一些其他問題需要解決。在這裡

樹的遍歷之----先序，中序，後序和層序遍歷

1先序、中序、後序遍歷（遞迴實現）先序遍歷：中左右中序遍歷：左中右後序遍歷：左右中 public static class Node { public int value; public Node left; public Node right;

css中文字（text）和字型（font）屬性

文字屬性 1、text-decoration屬性表示文字的修飾 none：取消裝飾 underline ：下劃線，與標籤、效果相同 overline ：上劃線 line-through ：貫穿線（刪除線），與標籤、效果相同 blink ：閃爍（因相容性問題很少使用）

深入理解CSS中的層疊上下文和層疊順序

零、世間的道理都是想通的在這個世界上，凡事都有個先後順序，凡物都有個論資排輩。比方說食堂排隊打飯，對吧，講求先到先得，總不可能一擁而上。再比如說話語權，老婆的話永遠是對的，領導的話永遠是對的。在CSS屆，也是如此。只是，一般情況下，大家歌舞昇平，看不出什麼差異，即所謂的眾生平等。但是，當

Java中ThreadLocal，成員變數和區域性變數。

一.成員變數和區域性變數 1.程式例子： public class HelloThreadTest { public static void main(String[] args) { HelloThread r = new HelloThread();

CSS中“em”，“rem” 簡介

“em”是一個相對大小，可以指定到小數點後三位。 1. 瀏覽器的預設字型大小是16px; 1em = 16px; 2.當前元素的font-size中em是相對於其父元素font-size的值來計算的。 3.當前元素的其他屬性（非font-size）中em是相對於本元素字型大小的值來計

Linux中的萬用字元和正則表示式

在linux中，有萬用字元和正則表示式，這是兩個不同的概念萬用字元：它是由shell解析，並且一般用於匹配檔名。如：ls 正則表示式：是一個字元匹配標準，可以匹配文字中的內容一些命令工具按此標準實現字元匹配，常用於支援正則表示式的工具，如grep，sed等。一般用於匹配檔案中的內

css中absolute使用，用position和transform是div裡面的div垂直居中

相關推薦