html 4种居中方式

1.弹性盒居中

  .wrapper{width: 300px;height: 300px;border:1px solid black;display: flex;justify-content: center;align-items: center;}.content{width: 100px;height: 100px;border: 1px solid black;}

2.Grid 居中

    .wrapper{height: 300px;width: 300px;display:grid;align-items:center;justify-items: center;  border:1px solid black;}.content {border:1px solid black;width: 100px;height: 100px;}

3.translate居中

    .wrapper{width: 300px;height: 300px;border:1px solid black;position: relative;}.content{width: 100px;height: 100px;border: 1px solid black;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

4.margin居中

.wrapper{width: 300px;height: 300px;border:1px solid black;position: relative;}.content{width: 100px;height: 100px;border: 1px solid black;position: absolute;top:0;right:0;bottom:0;left:0;margin:auto;}

html 4种居中方式相关推荐

HTML+CSS中常见的几种居中方式
前言在HTML+CSS网页制作开发中经常使用居中操作,实现方式更是多种多样,为了方便大家学习,文章将为大家介绍几种最常见的水平居中方式以及水平+垂直居中方式,比较适合初学者使用. 一.水平居中方法 ...
QComboBox文字居中的几种实现方式
不知道你有没有遇到过这样的需求,将一个QComboBox的文字居中显示.我最近遇到了这样的需要,主要是要在表头中增加可以下拉的列表来进行过滤的功能,这也就要求我们必须将下拉列表的文字居中显示. 这种需 ...
Android开发的之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...
CSS垂直居中的11种实现方式
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其它非主流浏览器. 11种实现方式分别如下: 1. 使用绝对定位和负外边距对块级元素进行垂直居中 html代码: <div id= ...
AutoLayout的三种设置方式之——NSLayoutConstraint代码篇
本文转载至 http://www.cnblogs.com/madpanda/p/4311980.html AutoLayout是从IOS 6开始苹果引入来取代autoresizing的新的布局技术,该 ...
Android格子视图的另外一种实现方式之Images3LinearLayout(9宫格/九宫格)
宫格视图LatticeApp让开发再变得简单些! 文章最后有demo下载地址这一篇讲的是LatticeApp最后一个控件Images3LinearLayout,也是这几个控件中代码量最多的一个控件了 ...
WPS和Word段落文字5种对齐方式的功能、区别和用法详细解析
在WPS文字和Word文档中,段落中的文字对齐方式共有五种,分别是:左对齐.居中.右对齐.两端对齐.分散对齐. 这五种对齐方式分别实现了什么对齐效果?他们的区别是什么?在什么时候使用哪种对齐方式呢?能 ...
方向gravity_两种对齐方式，layout_gravity和gravity大不同
原标题:两种对齐方式,layout_gravity和gravity大不同上一期我们一起学习了LinearLayout线性布局的方向.填充模型和权重,本期来一起学习LinearLayout线性布局的对 ...
Python列表(list)反序(降序)的7种实现方式
Python列表(list)反序(降序)的实现方式:原址反序,list.reverse().list.sort().全数组遍历.1/2数组遍历:新生成列表,resersed().sorted().负步 ...
【陈工笔记】# LaTeX中，单元格数据居中方式 #
"良好的习惯,才不会让努力白白浪费." 第一种方式: 使用"p{1.5cm}<{\centering}"指定单元格大小并设置对齐,其中p{1.5cm}指定 ...

html 4种居中方式

1.弹性盒居中

2.Grid 居中

3.translate居中

4.margin居中

html 4种居中方式相关推荐

最新文章

热门文章