主要记录自己日常积累的布局相关的东西，持续更新中。

1.登录框上下左右自适应居中

以前想要把登录表单始终放置在页面的中间，花了不少心思，一直以来用的解决方法都是用js，感觉有点麻烦不是很好，于是在网上查询了一下发现了一种比较的实现方法。

原理就是用position:absolute,然后用left：50%，top：50%，现在登录表单左侧直角是在页面的中间了，但是登录框本身还有宽度和高度，所以我们再用margin-left:-登录框宽度，margin-top：-登录框高度，就可以让登录框显示在页面的正中间了。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

	<title>登录框自适应居中</title>

	<style>

	#LoginContainer {

		position: absolute;

		width:400px;

		height:200px;

		left:50%;

		top:50%;

		margin-left:-200px;

		margin-top:-100px;

		border:1px solid #ccc;

	}

	</style>

</head>

<body>

	<div id="LoginContainer">

	这是登录框

	</div>

</body>

</html>

　　

很多问题的解决方法都不止一种，还是要多学习多交流啊。

2.左右布局，左侧固定宽度，右侧自适应宽度

原理就是左侧div固定宽度+float，然后右侧的div设置左间隔左侧div宽度的距离就可以了（margin-left:左侧div的宽度）

<style type="text/css">

    html, body { padding: 0px; margin: 0px; height: 100%; overflow: hidden; }

    .container { height: 100%; border: 1px solid #ccc; min-width: 600px; }

        .container .west { border-right: 1px solid #ccc; height: 100%; width: 200px; float: left; }

        .container .content { height: 100%; margin-left: 200px; }

</style>

<div class="container">

    <div class="west">west</div>

    <div class="content">content</div>

</div>

3.利用translate(-50%, -50%)居中(红色为关键部分)

　　position: fixed;
　　min-width: 100px;
　　color: #fff;
　　border-radius: 2px;
　　background-color: rgba(0, 0, 0, 0.6);
　　padding: 10px 5px;
　　top: 50%;
　　left: 50%;
　　transform: translate(-50%, -50%);
　　text-align: center;

css+div上下左右自适应居中的更多相关文章

  1. CSS实现DIV水平自适应居中

    DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...

  2. 如何让div上下左右都居中

    在做登陆页面的话,需要login的div 上下左右都居中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

  3. css div上下左右居中

    相信大家都会遇到这样的问题,要求一个块上下左右居中,在这里我总结了几个好用的方法 1.已知要居中的块width height 假设  content 要在f里上下左右居中 <div class＝ ...

  4. CSS DIV中表格居中显示

    将div的text-align设为center,然后将table的margin设为auto,即: <div> <table style="margin:auto; widt ...

  5. html分页自适应居中；css设置分页自适应居中

    制作网页列表的分页必不可少,显示的列表条数也不一样,让我们一起来看看如何让分页标签根据给定的分页自动居中呢. 对<ul>标签设置样式为:{ display: table margin:40 ...

  6. margin重叠现象与margin auto自适应居中

    上下相邻的(算一种兄弟关系)普通元素,上下边距并非简单的相加,而是取其中最大的边距值:而浮动的盒子边距是相加的:父子div也会发生重叠,并不是bug: <style>#test1{ wid ...

  7. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  8. css div图片上下左右居中

    <style type="text/css"> div{border:1px solid #ccc;height:500pc;width:500px;text-alig ...

  9. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

随机推荐

  1. springboot打成war包并携带第三方jar包

    1.修改打包方式为war     <packaging>war</packaging> 2.添加第三方依赖的jar到pom     我的第三方jar包在resoueces目录下 ...

  2. 基于90nm CMOS技术的功能齐全的64Mb DDR3 STT-MRAM

    自旋转矩磁阻随机存取存储器(ST-MRAM)有望成为一种快速,高密度的非易失性存储器,可以增强各种应用程序的性能,特别是在用作数据存储中的非易失性缓冲器时设备和系统.为此,everspin开发了基于9 ...

  3. L001.PyQt

    초보자를 위한 Python GUI 프로그래밍 - PyQt5 https://wikidocs.net/book/2944 https://freeprog.tistory.com/330?cat ...

  4. Vue中echarts的使用

    1.安装 npm install echarts --save 2. 导入并挂载 <template>   <!-- 1. 为ECharts准备一个具备大小(宽高)的Dom --&g ...

  5. Excel创建下拉列表限制数据有效性

    方法 选中目标区域,点击菜单栏[数据]-[数据验证]-验证条件选择[序列]-输入所需文本即可

  6. tensor的维度扩张的手段--Broadcasting

    broadcasting是tensorflow中tensor维度扩张的最常用的手段,指对某一个维度上重复N多次,虽然它呈现数据已被扩张,但不会复制数据. 可以这样理解,对 [b,784]@[784,1 ...

  7. Android之活动Activity用法

    Activity是Android的四大组件之一,本篇将通过Activity的生命周期,Intent的组成部分以及如何使用Intent进行页面之间的消息传递来介绍它的基本用法. 1.activity的生 ...

  8. ABS与PC材质

    PC材料和ABS材料都是最常用的塑料材质,它们在材质.价格.性能上都有不同点. (一)PC材料 优点:PC是一种综合性能优良的非晶型热塑性树脂,具有优异的电绝缘性.延伸性.尺寸稳定性及耐化学腐蚀性,较 ...

  9. 如何调试TaskPaper的JavaScript上下文？

    Mac 上的纯文本 GTD 工具TaskPaper for Mac(纯文本任务管理器)是一款适用于Mac操作系统的软件.如何调试TaskPaper的JavaScript上下文?[dl]15-1068[ ...

  10. <转载> 撤销 git reset 操作

    https://blog.csdn.net/mhlghy/article/details/84786497