關於百分比寬高div居中並垂直居中問題

阿新 • • 發佈：2018-02-26

nbsp text bottom bubuko 定位 doctype ati ext div

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>關於div居中</title>
</head>
<style type 
="text/css">
    html,
    body {
        height: 100%;
    }

    .div1 {
        width: 60%;
        height: 40%;
        border: 1px solid #000000;
    }

    .div2 {
        width: 40%;
        height: 45%;
        background-color: green;
    }
</style>

<body>
    <div class="div1">
        < 
div class="div2">

        </div>
    </div>
</body>

</html>

技術分享圖片

一、絕對定位

.div1 {
     position: relative;
 }

.div2 {
     margin: auto;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
 }

技術分享圖片

二、translate

.div2 {
     position: relative;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

三、flex

.div1 {

　　　　display: flex; 　　　　justify-content: center; 　　　　align-items: center;

關於百分比寬高div居中並垂直居中問題

nbsp text bottom bubuko 定位 doctype ati ext div <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

寬高均為百分比的DIV，水平垂直居中

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"

css中固定寬高div與不固定寬高div垂直居中的處理辦法

分配 css代碼 http min har 空間 -i dex round 固定高寬div垂直居中如上圖，固定高寬的很簡單，寫法如下： 1 position: absolute; 2 left: 50%; 3 top: 50%; 4 width:200px;

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

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

TextView 設定行高並垂直居中

需求： TextView 多行文字可以設定行高（如20dp），每行文字垂直居中。效果如下：實現思路：通過設定 TextView 的 lineSpacingExtra 和 lineSpacingMultiplier 來實現。 lineSpacing

div水平和垂直居中顯示

tex wid bottom gin alt 分享 left log mage .div1{ width: 100px; height: 100px; border: 4px solid red; position: absolute;

div盒子水平垂直居中的方法

瀏覽器效果 tom title height splay 固定 ima color 一、盒子沒有固定的寬和高方案1、Transforms 變形這是最簡單的方法，不僅能實現絕對居中同樣的效果，也支持聯合可變高度方式使用。內容塊定義transform: translate

如何讓DIV水平和垂直居中

CSS讓DIV水平居中說明，本文中所指的DIV包括HTML頁面中所有的元素。讓一個DIV水平居中，直接用CSS就可以做到。只要設定了DIV的寬度，然後使用margin設定邊距0 auto，CSS自動算出左右邊距，使得DIV居中。 .mydiv{ margin:

div適應螢幕垂直居中的多種解決方案

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *

div盒子水平垂直居中方法?

一: 盒子沒有固定的寬和高 1. 在父級元素上面加上上面3句話，就可以實現子元素水平垂直居中。 <div class="wrapper"> 我不知道我的寬度和高是多少，我要實現水平垂直居中。 </div>　　 .wrappe

單行文字與多行文字在div排列中垂直居中

在一行四列、固定高度的div中，有的div裡p為單行，有的p為多行，要使他們都能保持在div中居中。為父元素設定高度、行高為p元素設定display、行高、位置 div{ width:100px; height:200px; line-hei

css3 display:flex；（flex佈局）+img標籤在div中水平垂直居中

img標籤在div中水平垂直居中--兩種實現方式第一種方式： text-align:center; vertical-align:middle; div{ text-align: center; vertic

hmtl div水平、垂直居中

最近寫網頁經常需要將div在螢幕中居中顯示，遂記錄下幾個常用的方法，都比較簡單。水平居中直接加上<center>標籤即可，或者設定margin:auto;當然也可以用下面的方法下面說兩種在螢幕正中（水平居中+垂直居中）的方法放上示範的html程式碼：<body>

css3 display:flex；（flex佈局）+img標籤在div中水平垂直居中

第一種方式： text-align:center; vertical-align:middle; div{ text-align: center; vertical-align:middle;w

css不定高使元素水平垂直居中

父元素高度不定，子元素水平垂直居中 html <div class="parent"> <div class="child">123456</div> <

網頁常見佈局，讓圖片在div中，垂直居中，水平居中

網頁常見佈局，圖片在div中垂直居中，水平居中 div{text-align:center;border:1px solid #000;width:500px;height:500px;vertical-align:middle;display:table-cell;}

如何讓DIV水平和垂直居中三種方法

方法1 CSS實現水平和垂直居中要讓DIV水平和垂直居中，必需知道該DIV得寬度和高度，然後設定位置為絕對位置，距離頁面視窗左邊框和上邊框的距離設定為50%，這個50%就是指頁面視窗的寬度和高度的50%，最後將該DIV分別左移和上移，左移和上移的大小就是該D

css3 flex 詳解,可以實現div內容水平垂直居中

先說一下flex一系列屬性：一、flex-direction: （元素排列方向） ※ flex-direction:row （橫向從左到右排列==左對齊）　　　　　　　　　　※ flex-direction:row-reverse （與row 相反）　　　　

實現div水平、垂直居中的幾種方法

1、最常用的，也是最簡單的(利用position定位、再用margin偏移) <!DOCTYPE html> <html> <head> <meta ch

3行Css實現div水平、垂直居中

HTML部分： <div class="container">  </div> Css部分：就像下面，只需要給.containe

關於百分比寬高div居中並垂直居中問題

相關推薦