CSS居中问题

1 text-align:center

文本居中问题(图片)

2 align-content

此属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex线对齐

使用前提:flex布局;

任意布局:display:flex;

行内元素:display:inline-flex;

3 居中总结

3.1 水平居中

3.1.1行内元素居中(文本(text)、图片(img)、按钮等)

text-align:center;

3.1.2块状元素居中

  1. 定宽块状元素居中

满足宽度(块状元素的宽度width为固定值)和块状两个条件的元素可以通过左右margin值为auto来实现居中。

.div1{
     width:200px;
     border:1px solid red;
position: relative;
margin:0 auto;
}
<div class="div1">Hello world</div>
  1. 不定宽块状元素居中

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素:块状元素的宽度width不固定。)

​ i. 改变块级元素的display为inline类型(设置为行内元素显示),然后使用text-align实现居中效果。

​ ii. 通过给父元素设置float,然后给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。

3.2 垂直居中

  1. 父元素高度确定的单行文本

    ​ 通过设置父元素的height和line-height高度一致来实现的(height为元素的高度,line-height为行高,指在文本中,行与行之间的基线间的距离)。

  2. 父元素高度确定的多行文本

    ​ 使用插入table(包括body、tr、td)标签,同时设置vertical-align:middle。

3.3 水平垂直居中

#login_box {
width: 300px;
height: 150px;
border: 1px solid #ccc;
position: absolute;
left: 50%;top: 50%;
margin-left: -150px;
margin-top: -75px;
}

这几行在#login_box中的目的是使其在浏览器中水平居中显示。(无论浏览器被如何拉伸,该login_box始终保持居中)

原理(对齐浏览器的中心点与#login_box的中心点,这样就使得.foot在浏览器中水平居中了):

left:50%; 使#login_box左边框距离浏览器左边50% ,所以login_box整体并不是位于浏览器中间,

需要使用margin-left: -150px; 使#login_box向左移动150像素(即login_box自身宽度的一半)。这样box整体就位于浏览器中间了。

top: 50%; margin-top: -75px 的道理同上。

“妄”眼欲穿之CSS 居中问题的更多相关文章

  1. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  2. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  3. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

  4. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  5. CSS居中完全解决方案

    上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...

  6. 理解CSS居中

    我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...

  7. CSS 居中大全【转】

    我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...

  8. CSS居中的实现用法实例

    转载的一篇文章,讲解css内容居中的. 网上有关css 居中的文章不胜枚举,不过大多没有做系统的总结.这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏. 一.水平居中1,将元素水平居中(us ...

  9. 各种div+css居中方式调整(转载)

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

随机推荐

  1. 初识python爬虫框架Scrapy

    Scrapy,按照其官网(https://scrapy.org/)上的解释:一个开源和协作式的框架,用快速.简单.可扩展的方式从网站提取所需的数据. 我们一开始上手爬虫的时候,接触的是urllib.r ...

  2. (转)jmeter接口测试--获取token

    Jmeter进行接口测试-提取token 项目一般都需要进行登陆才能进行后续的操作,登陆有时发送的请求会带有token,因此, 需要使用后置处理器中的正则表达式提取token,然后用BeanShell ...

  3. centos7.5 安装gaussian09和 gaussianview4

    一.安装gaussian09 1. 解压安装包 $ mkdir Gaussian$ cd Gaussian$ tar xvf g09_linux.tar 2. 设置环境变量 #gaussian09 e ...

  4. C语言实现迷宫小游戏

    代码如下,时间太晚,有空补注释: #include<stdio.h> #include<string.h> #include<time.h> #include< ...

  5. IDEA 201809 Jrebel安装破解

    jrebel介绍: JRebel是一款JAVA虚拟机插件,它使得JAVA程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响.JRebel使你能即时分别看到代码.类和资源的变化, ...

  6. 记录心得-IntelliJ iDea 创建一个maven管理的的javaweb项目

    熟能生巧,还是记录一下吧~ 开始! 第一步:File--New--Project--Maven--Create from archetype--maven-archetype-webapp 第二步:解 ...

  7. 2018软件工程W班第一次助教小结

    我是数计学院实验教学中心的一名老师,机缘巧合之下,这个学期跟着汪老师上<软件工程实践>这门课.之前有陆续听说过<构建之法>这本书,记得好像学院还有主办过研讨会.对于这门实践课, ...

  8. lua tonumber

    [1]应用tonumber函数 local function test(telnum) , )) == ) -- 5000~5999公司预留号码 , ) == ' or isLen or isRese ...

  9. Easy methods to select MB Star, Extremely MB Star, MB SD C4, Mercedes BENZ C5 SD

    MB Star, Extremely MB SD Connect C4, MB SD C4, Mercedes BENZ C5 SD are usually analysis tools to get ...

  10. 修改tomcatlog输出等级

    /usr/local/tomcat2/webapps/digital/WEB-INF/classes/log4j.properties log4j.properties配置如下(配置是转载): log ...