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

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. Python全栈开发第5天作业

    作业一:1) 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) 2) 将用户信息数据库文件和用户密码数据库文件纵向合并为一个文件/2.txt(追加) 3) 将/1.txt. ...

  2. Nginx作为静态资源web服务

    一.CDN 1.定义: 内容分发的逻辑网络. 2.作用: CDN能做到传输延时的最小化. CDN请求示意图如下: 二.静态资源需要配置的一些语法模块. 1.配置语法 - 文件读取 Syntax : s ...

  3. nginx环境准备

    一.环境调试确认 1.四项确认 确认公网已连通. 确认yum源可用. 确认iptables已经关闭. 确认selinux已经关闭. a.确认是否连通公网. ping www.baidu.com b.确 ...

  4. 2018年第一记：EDM策略分享-EDM营销的策略分析

    很久没有上博客园来更新下文章了,一则因为工作繁忙,二则对技术方面的研究时间花的少了,目前主要侧重于EDM营销方面的策略制定.很多人跟我说,做EDM营销都茫然无头绪,那么做EDM到底有什么策略呢?下面博 ...

  5. 阶段3 3.SpringMVC·_04.SpringMVC返回值类型及响应数据类型_2 响应之返回值是String类型

    返回字符串 新建一个response的页面 新建后台Controller类 视图解析器配置的前缀地址 是WEB-INF下的pages下的页面. 创建pages文件夹在下面创建success.jsp页面 ...

  6. PS技巧集合

    一.把图片变模糊 图像——调整——色阶——输出色阶——滤镜——模糊——高斯模糊——半径 二.图片换色 点击右下角弹层下方的“fx”——颜色叠加——色样颜色

  7. 数据库高级数据库学习--上机练习5（Transact-SQL）

    上机练习5 启动SQL Server 2008中的 SQL Server Management Studio,恢复数据库ClassDB: 采用Transact-SQL程序设计完成以下练习: . 求1到 ...

  8. Centos7 安装 Amazon Corretto 8

    yum install dejavu-sans-mono-fonts dejavu-serif-fonts jpackage-utils wget https://d3pxv6yz143wms.clo ...

  9. DevOps - Scrum

    1 - DevOps与敏捷开发 在采用敏捷开发的情况下,所有成员都对服务和产品负责,理解彼此的业务,符合DevOps的组织和文化. 以商业需求为核心,在较短期间内确定开发方针,并持续进行改善,从而逐步 ...

  10. python3.4 + pycharm安装与使用

    因个人是windows的环境,所以本文只讲windows环境下的python安装. 作为初用python的盆友,强烈建议只在电脑上装一个python版本就好了,不然就进了各种坑里了. Python安装 ...