布局中常见的居中问题

说到布局除了浮动以及定位外还有一个不得不提的点,那就是居中,居中问题我们在网页布局当中经常遇到,那么以下就是分为两部分来讲,一部分是传统的居中,另一种则是flex居中,每个部分又通过分为水平垂直居中来讲。

一、传统居中方式

1.1水平居中

1.1.1 inline

对于inline元素以及纯文本只需要为父元素设置

text-align: center;
适用于
inline, inline-block, inline-table, inline-flex

1.1.2 block

对于block元素则需要为想要居中的block设置

margin: 0 auto;

1.1.3 more-block:

多个块级元素直接居中同单个块级居中一样,但是如果要在单行内居中,需要先通过

display: inline-block
将块级元素转化为行内块元素再按照行内元素为父元素添加
text-align: center
的居中方式居中。

1.2垂直居中

1.2.1 inline

单行情况下,可以为父元素设置相同的上下padding实现居中

如果只是单行文字也可以设置行高等于父元素高度实现居中

如果设置上下相同padding没有用的话,可能该元素是表格,可以使用

vertical-align: middle
设定对齐基线为middle实现居中。

1.2.2 block

要居中的元素高度固定的情况下,可以使用position来定位,设置top为50%,但是因为top是盒子上边界的定位距离,所以还要通过负值的margin-top往回拉宽度的一半。

(以下只写核心代码,其他宽度高度border自己加)

.parent {position: relative;
}
.child {position: absolute;top: 50%;height: 100px;margin-top: -50px; 
}

但是如果高度不固定的话则可使用变换来替换margin负值达到动态高度的一半

// 只需要替换上面的margin-top: -50px; height可以直接去掉了
transform: translateY(-50%);

1.3水平垂直都居中

1.3.1 固定宽高

固定宽高下,同垂直居中方法一样,也是绝对定位50%然后通过margin负值拉回去

.parent {position: relative;
}
.child {position: absolute;top: 50%;left: 50%; margin: -50px 0 0 -50px; // 宽高为100px
}


此为还有一种方法也可以实现已知宽高时候的居中

// 此处如果是不定宽高的话就会child铺满整个父元素
.child {position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;
}

1.3.2 不固定宽高

// 同样是替换margin负值
transform: translate(-50%, -50%);

二、Flex居中方式

Flex的出现解决了传统居中方式难以实现的麻烦,仅需要几行代码就可以实现居中,Flex布局不仅能用于居中,在其他布局当中也相当的有效。想要启动Flex只要在父元素设置

display: flex
,内联元素的话则是
display: inline-flex
.

2.1 水平居中

.parent {display: flex;justify-content: center;
}

2.2 垂直居中

.parent {display: flex;align-items: center;
}

2.3 水平垂直居中

.parent {display: flex;justify-content: center;align-items: center;
}

此外,如果想要实现竖着排列flex实现也很容易,仅需要换一下主轴方向,多添加一行就行了。

.parent {flex-direction: column;
}


参考


学习CSS布局

视觉格式化模型

css-tricks:居中详解

本文转载于:猿2048➮https://www.mk2048.com/blog/blog.php?id=1akc1jb&title=布局中常见的居中问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370474.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

排序算法——桶排序

把数据放进若干个桶,然后在桶里用其他排序,近乎分治思想。从数值的低位到高位依次排序,有几位就排序几次。例如二位数就排两次,三位数就排三次,依次按照个十百...的顺序来排序。 第一次排序:50 12 …

原型设计模式:创建另一个小车

创建对象确实是一个耗时的过程,也是一件昂贵的事情。 因此,我们现在正努力节省时间和金钱。 我们该怎么做? 克隆奇迹多莉 有人记得多莉吗? 是的,是绵羊,是第一个被克隆的哺乳动物。 好吧,我不想…

java实现周期任务_java定时任务的实现方式

本文列举常见的java定时任务实现方式,并做一定比较。1. 循环内部sleep实现周期执行创建一个thread,run() while循环里sleep()来实现周期性执行; 简单粗暴,作为一个初学者很容易想到。public class Task1 {public static void main(String[] a…

HTTPS协议在Tomcat中启用的配置

本文将讲解HTTPS协议在Tomcat中启用是如何配置的。 概念简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试 JSP 程序的首选。 HTTP 超文本…

CSS3实现烟花特效 --web前端

烟花特效&#xff0c;比较简单&#xff0c;直接贴代码了……<!DOCTYPE html><html lang"en"><head> <meta charset"UTF-8"> <title>css3实现烟花特效</title> <style> * { margin: 0; padding: 0; } html{ widt…

java.lang.ClassNotFoundException:如何解决

本文适用于当前面临java.lang.ClassNotFoundException挑战的Java初学者。 它将为您提供此常见Java异常的概述&#xff0c;这是一个示例Java程序&#xff0c;可支持您的学习过程和解决策略。 如果您对与更高级的类加载器相关的问题感兴趣&#xff0c;我建议您复习有关java.lang…

小程序实践(三):九宫格实现及item跳转

效果图&#xff1a; 实现效果图红色线包含部分的九宫格效果&#xff0c;并附带item点击时间。 ------------------------------------------------------------------------------------------------------ 具体实现&#xff1a; 1、首先添加图片资源文件 在项目根目录新建一个…

用JavaFX编写图块引擎

随着JavaFX嵌入式版本的问世&#xff0c;我们的框架对于游戏开发变得越来越有趣&#xff0c;因为我们现在可以瞄准平板电脑和智能手机等小型消费类设备。 因此&#xff0c;我决定对JavaFX进行更多的游戏编写实验。 这次&#xff0c;我想使用Canvas对渲染进行更多控制&#xff0…

HTML5--应用网页模板

因为刚开始写博客,只想着把知识点记录在这,也想给你们一些参考,在布局上有些没有思考太多;回过头来看,实在是不忍直视,对不住之前阅读的100 ,既然昨天的事无法挽回,那就从现在开始从新整改吧!也希望大家看了,能对你们有所帮助 1.先给大家看看效果图,好让大家有点兴趣 2.大家再来…

企业集成模式简介

在此博客文章中&#xff0c;我们将介绍一些企业集成模式。 这些是旨在解决集成挑战的已知设计模式。 阅读此书后&#xff0c;您将可以设计集成解决方案。 EIP&#xff08;简而言之&#xff09;是已知的设计模式&#xff0c;可为应用程序集成过程中遇到的问题/问题提供解决方案…

手把手教你Chrome浏览器安装Postman(含下载云盘链接)【转载】

转载自&#xff1a;http://www.ljwit.com/archives/php/278.html 说明&#xff1a; Postman不多介绍&#xff0c;是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。本文主要介绍下安装过程。 本文使用的是解压文件直接进行安装。是比较快速有效的安装方式&#xff0c;…

C语言博客作业--数据类型

题目1&#xff1a;7-4 打印菱形图案 1. 本题PTA提交列表 2. 设计思路 1.定义变量i,j,k,n;且声明i为要打印的行数&#xff0c;j是控制输出打印空格和星星&#xff0c;n是菱形为菱形的高 2.输入n 3.i1&#xff0c;j1 4.先打印上半部分&#xff0c;第一行到n/21行&#xff0c;输出…

信息隐藏将txt文件合并到jpg文件中_使用Kali Linux在图像内隐藏机密消息—可在任何Linux发行版使用

欢迎回到“Esn技术社区”&#xff01;今天&#xff0c;我们将演示如何使用Steghide(一种可在Kali Linux上使用的流行隐写工具)在图像内隐藏消息。在计算机科学中&#xff0c;将信息隐藏在文件内(例如图像&#xff0c;文档&#xff0c;程序&#xff0c;有用数据&#xff0c;消息…

java方法调用机制_Java方法调用机制 - osc_bkdv2it5的个人空间 - OSCHINA - 中文开源技术交流社区...

最近在编程时&#xff0c;修改方法传入对象的对象引用&#xff0c;并没有将修改反映到调用方法中。奇怪为什么结果没有变化&#xff0c;原因是遗忘了Java对象引用和内存分配机制。本文介绍3个点&#xff1a;① 该问题举例说明② 简要阐述Java内存区域③ 介绍JVM中方法调用的机制…

CSS染色图标(图片)

之前一直以为用background引入的图标无法染色&#xff08;非字体图标&#xff09;&#xff0c;现在才知道有黑科技可以用&#xff0c;就是利用drop-shadow。 代码示例 <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"&…

eclipse安装java web插件

1 查看eclipse版本 找到eclipse的安装目录&#xff0c;找到readme文件&#xff0c;打开其中的html文件&#xff0c;我的是4.6版本的,代号是oxygen 2 安装 打开eclipse,点击help-Install new software-单击add&#xff0c;在弹出窗口中输入网址&#xff1a; http://download.ecl…

实现输入框小数多 自动进位展示,编辑时实际值不变

今天遇到个业务需求&#xff0c;要求输入框&#xff0c;输入数字的小数位数可以很多位&#xff0c;但移开后显示&#xff0c;只显示小数点后两位 &#xff08;四舍五入&#xff09;&#xff0c;当要编辑的时候&#xff0c;展现其原来的输入数据。 闲话不多说&#xff0c;当时也…

使用Jasper Reports以Java创建报告

上周&#xff0c;我试图使用Jasper创建报告。 在这篇文章中&#xff0c;我将记录一些资源和链接&#xff0c;以便对任何寻求类似信息的人都有用。 我将介绍Jasper报告&#xff0c;示例和Dynamic Jasper的生命周期。 Jasper Reports是世界上最受欢迎的开源报告引擎。 它完全用…

CentOS7 安装NodeJS

一、切换目录到/usr/local/src 命令行&#xff1a;cd /usr/local/src 二、下载node.js&#xff08;我这里下载的是二进制的源码&#xff09; 命令行&#xff1a; wget https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.xz 图片&#xff1a; 三、解压压缩包 命令行&am…

CSS3基础2(变形与动画)

<!DOCTYPE html5><html lang"en"><head> <meta charset"UTF-8"> <title>CSS3基础知识&#xff08;动画&#xff09;</title> <style> /*div{*/ /*width: 150px;*/ /*hei…