CSS将div水平垂直居中

作者: 张先森Mr_zhang | 来源:发表于2020-07-13 14:39 被阅读0次

1. flex布局

// 父级div
.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

2. 定位方法

div1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

或者

.div1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

CSS水平垂直居中总结
CSS水平居中、垂直居中、水平垂直居中方法总结文字的水平居中: 单行文字的垂直居中：让有宽度的div水平居中：...
CSS将div水平垂直居中
1. flex布局 2. 定位方法或者
文本在div中水平垂直居中
****让文字在div中水平居中**** css样式代码.content可以让content中内容水平垂直居中
动态设置div css属性
jQuery实现水平和垂直居中 jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS，获取D...
CSS图片居中(水平居中和垂直居中)
css图片水平居中 css图片垂直居中 css图片水平垂直居中
Css让div在屏幕上居中
# 让div在屏幕上居中（水平居中+垂直居中）的方法总结 - html代码如下： - Css居中方法（敲黑板）...
随手记之H5
1.div文本水平垂直居中不要用line-height, css样式如下：
不定宽高的div盒子和不定宽高的盒子水平垂直居中
让一个不定宽高的div，垂直水平居中的几种实现方式不定宽高的div垂直居中的方式： 1、使用CSS方法：父盒子...
垂直居中显示（文字&块级元素）
文字在div中垂直居中显示 -方法1：将div改为table格式css如下： html如下： -方法2：将div改...
CSS实现水平垂直居中
把content的div在wrapper的div中水平居中垂直 text CSS实现：第一种方法 ....

本文标题：CSS将div水平垂直居中

本文链接：https://www.haomeiwen.com/subject/gmvacktx.html