水平居中（包含块中居中）

1. 定宽，左右margin为auto。（常规流块盒、弹性项目[不用定宽]）

例子：在box1盒子上设置宽，再设置margin：auto；

<style>

    .box1 {

        width: 200px;

        height: 200px;

        background-color: black;

        margin: auto;

    }

</style>

<body>

    <div class="box-all">

        <div class="box1"></div>

    </div>

</body>

得到的效果：

2. 弹性盒设置justify-content: center，让弹性项目在主轴上居中。（普遍适应）

例子：在其父元素上设置弹性盒子，和对齐方式；

<style>

    .box-all {

        display: flex;

        justify-content: center;

    }

    .box1 {

        width: 200px;

        height: 200px;

        background-color: black;

    }

</style>

<body>

    <div class="box-all">

        <div class="box1"></div>

    </div>

</body>

得到的效果：

3. 父元素设置text-align: center，让其内部的行盒、块盒居中（文本）。

例子：在盒子上设置text-align:center；文本自动居中；

<style>

    p {

        text-align: center;

    }

</style>

<body>

    <div class="box-all">

        <p>这是一段文本。</p>

    </div>

</body>

得到的效果：

4. 相对定位元素，margin-left:50%; transform:translateX( -50%)。[margin,padding相对于包含块宽度的百分比] 【终极方案】

例子：对盒子设置相对定位属性，在用上面方式进行定位；

<style>

    .box1 {

        width: 200px;

        height: 200px;

        background-color: black;

        position: relative;

        margin-left: 50%;

        transform: translateX(-50%);

    }

</style>

<body>

    <div class="box-all">

        <div class="box1"></div>

    </div>

</body>

得到的效果：

垂直居中（方法与上面类似，我就不演示了）

1. 单行文本垂直居中，设置父元素的line-height为包含块高度。

2. 弹性盒设置align-items:center，让弹性项目在侧轴上居中。

3. 相对定位元素，top：50%；transform:translateY(-50%)。【终极方案】

css样式水平居中和垂直居中的方法的更多相关文章

  1. CSS元素水平居中和垂直居中的方法大全

    水平居方法: 1.最熟悉的是给元素定义一个宽度,然后使用margin: body{ width:960px; margin:0 auto;}这个是当我们的定义元素的宽度时显现的,如果我们不能定义宽度时 ...

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

    #CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...

  3. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  4. css样式之vertical-align垂直居中的应用

    css样式之vertical-align垂直居中的应用:将图片垂直左右居中 元素垂直居中 1:必须给容器父元素加上text-align:center 2:必须给当前元素转换成行内块元素,display ...

  5. CSS：水平居中与垂直居中

    CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中. 水平居中 1.行内元素 行内元素(主 ...

  6. CSS的水平居中和垂直居中解决方案

    在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...

  7. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

  8. CSS样式，语法，添加方法，文本，字体

    总结一些css的基础知识 ㈠css样式 css:cascading style sheets  层叠样式表 css内容和样式相分离,便于修改样式. ㈡css语法 ㈢css添加方法 ⑴行内添加:放在&l ...

  9. 在网页中插入CSS样式表的几种方法

    1. 链入外部样式表 链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head> ...

随机推荐

  1. 石川es6课程---13-16、generator-认识生成器函数

    石川es6课程---13-16.generator-认识生成器函数 一.总结 一句话总结: ` generator函数,中间可以停,到哪停呢,用 yield 配合,交出执行权 ` 需要调用next() ...

  2. HearthBuddy的plugin加载

    // Hearthbuddy.Windows.MainWindow // Token: 0x060001FF RID: 511 RVA: 0x0008951C File Offset: 0x00087 ...

  3. linux 禁ping

    今天用nmap扫描了局域网的主机,发现几个主机开着好多危险端口,做linux的,对这些安全知识有一点了解.遂用nmap扫描了自己的主机是否存在可利用端口.发现每次nmap都能成功的检测我的主机是ali ...

  4. windows上配置pytorch

    操作系统:win10 已安装程序:Python 3.6 + Anaconda 5.1.0 + CUDA 9 pytorch官网:https://pytorch.org/ 1.进入官网,从Get Sta ...

  5. LC 384. Shuffle an Array

    Shuffle a set of numbers without duplicates. Example: // Init an array with set 1, 2, and 3. int[] n ...

  6. 第一个简单APP设计图

    以下是我画出来的最简单的手机UI设计图哟,以后慢慢积累吧.... 其实使用很简单,很多控件都有,直接使用就好....还是多动手吧,相信自己之后能很好的掌握这个的使用哟!!!!!!

  7. OpenCV-Python画直方图和累积直方图

    代码如下: import cv2 import numpy as np import matplotlib.pyplot as plt img = cv2.imread('C:\\Users\\adm ...

  8. Django-给视图加装饰器

    给FBV加装饰器 FBV:function based view FBV本身就是一个函数,所以跟普通函数加装饰器是一样的 # 装饰函数是要在APP文件中定义,本例是在app01\templatetag ...

  9. pytorch中的激励函数（详细版）

          初学神经网络和pytorch,这里参考大佬资料来总结一下有哪些激活函数和损失函数(pytorch表示)      首先pytorch初始化:   import torch import t ...

  10. MyBatis 简单入门

    添加maven 依赖 <dependencies> <dependency> <groupId>org.mybatis</groupId> <ar ...