CSS常用的幾種水平居中的方式

阿新 • • 發佈：2020-12-16

CSS常用的幾種水平居中的方式

html佈局最常見的就是水平居中對齊，文字在div裡面居中，div在div裡面居中，圖片在div裡面居中等等，今天給大家總結幾個CSS中最常見的幾種水平居中的方式，絕對好用！

文字在div裡面水平居中

html部分

<!DOCTYPE html>
<html>

<head lang="zh">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" 
>
    <meta charset="utf-8" />
    <title>裝置管理</title>
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <div class="content">
        <div class="box">我是div裡面的文字</div>
    </ 
div>
</body>

</html>

CSS部分-利用text-align:center屬性

.box{
        background: yellow;
        width: 200px;
        height: 100px;
        line-height: 100px;/*讓黃色div中的文字內容垂直居中*/
        text-align: center;/*讓文字水平居中*/
        position: absolute;    
    }

實現的效果如下圖文字在在這裡插入圖片描述

div在div裡面水平居中

1.通過屬性margin:0 auto;需注意要設定內層div的寬度。

2.通過flex佈局實現：在外層div上設定：

display:flex;
justify-context:center;/*讓div在div裡面水平居中，該方法在塊級元素和行內元素的水平居中效果上都適用*/
align-items:center;/*讓div在div裡面垂直居中，該方法同樣適用於行內元素的垂直居中*/

圖片在div裡面水平居中

水平居中在圖片的父元素中用text-algin:center;進行水平居中
html部分

 <div class="wrap">
	    <img src="../assets/img/manage/notice.png" alt="">
       </div>

CSS部分

.wrap{ width: 600px;
       height: 400px; 
       border: 1px #000 solid; 
       text-algin:center
      }

上面介紹了幾種最常見，最簡單的方式，希望對大家有所幫助！

CSS常用的幾種水平居中的方式

技術標籤：CSS和htmlcsscss3htmlhtml5 CSS常用的幾種水平居中的方式 html佈局最常見的就是水平居中對齊，文字在div裡面居中，div在div裡面居中，圖片在div裡面居中等等，今天給大家總結幾個CSS中最常見的幾種水平

HTML/CSS常見的幾種水平居中、垂直居中、水平垂直居中方法

技術標籤：htmlcss HTML/CSS常見的幾種水平居中、垂直居中、水平居中方式一、水平居中

Css幾種水平垂直居中的方式的利弊

css中實現水平垂直居中的方式很多。別看到水平垂直居中就準備右上角 x 掉，本文的重點不是羅列有多少種方式實現水平垂直居中方式，而是探討一下常見的幾種水平垂直居中的方式的利弊。

前段筆記4：引入css的幾種方式

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

CSS 不定寬高的垂直水平居中方式總彙

垂直居中，在css中是一個老生常談的問題，面試的時候也會時常被提及。所以，今天我們就來聊聊 9 種不同的居中方法。

淺談redis加鎖常用幾種方式

一、incr加鎖 <?php $redis = new Redis(); $redis->connect(\'127.0.0.1\'); $redis->multi();

win10系統常用的幾種截圖方式

技術標籤：環境搭建集錦 windows系統常用的幾種截圖快捷鍵 1.Win+Shift+S 2.QQ截圖 Ctrl+Alt+A

簡單介紹redis加鎖常用幾種方式

這篇文章主要介紹了淺談redis加鎖常用幾種方式，文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

vue動態繫結class的最常用幾種方式：

第一種：（最簡單的繫結） 1.繫結單個class html部分： <div :class=\"{\'active\':isActive}\"></div>

C# 實現執行緒的常用幾種方式

前言　　在各個開發語言中，執行緒是避免不了的，或許通過表象看不出來，但是真的無處不在。就比如一個Web程式，平時或許只注重增刪改查的開發，根本沒有編寫相關多執行緒的的程式碼，但是請求內部的時候，已經分

php使用redis的幾種常見操作方式和用法示例

本文例項講述了php使用redis的幾種常見操作方式和用法。分享給大家供大家參考，具體如下：

CSS的幾種定位詳解

CSS中的定位使用來佈局的熟練應用對頁面美化有很好的幫助，下面就進行詳細介紹：定位分為靜態定位，相對定位，絕對定位，固定定位這四種，定位有不同的引數，例如：left、right、top、bottom、z-index等。

ng-class常用幾種寫法

1.ng-class使用變數即ng-class的值是一個變數，當我們改變變數值時，得到的class名也會對應改變；例如下面的例子中文字樣式的class名由select的值決定，選擇不同選項得到不同的效果，例如：

C++11 for區間遍歷:vector幾種遍歷方式

近來，基本上所有現代程式語言都有一種對一個區間寫for迴圈的便捷方式。最終，C++也有了相同的概念；你可以給迴圈提供一個容器，它幫你迭代。

Mybatis的幾種傳參方式詳解

前言前幾天恰好面試一個應屆生，問了一個很簡單的問題：你瞭解過Mybatis中有幾種傳參方式嗎？

hive幾種建表方式

技術標籤：hive 普通建表如建立一個分割槽表： create external table if not exists default.deptpart1( deptno int, dname string, loc int ) PARTITIONED BY(area string) row format delimited fields term

synchronized的幾種加鎖方式

技術標籤：Java基礎知識 1、修飾普通方法（鎖住的是當前例項物件）同一個例項呼叫會阻塞不同例項呼叫不會阻塞

c# 幾種深拷貝方式的比較

public static class Tools { //利用 BinaryFormatter 實現深拷貝 public static T DeepCopyByBinary<T>(this T obj)

記錄Unity3D中的幾種角色控制方式

1.使用Transform直接控制 public int speed; Vector3 input; void Update() { //使用一個input向量接收按鍵的輸入

Spring 有哪幾種依賴注入方式？官方是怎麼建議使用的呢？

作者：Richard_Yi 來源：juejin.cn/post/6844904056230690824 IDEA 提示 Field injection is not recommended

CSS常用的幾種水平居中的方式

CSS常用的幾種水平居中的方式

文字在div裡面水平居中

div在div裡面水平居中

圖片在div裡面水平居中

相關推薦