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

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. LAMP搭建随笔

    前言 这是我第一次在写博客,里面记录了我配置LAMP遇到的各种各样的细节,也许表述不够准确,希望大佬给于批评指正 环境 OS Ubuntu server 18.04.3 远程连接软件 cmder 文件 ...

  2. 【58】目标检测之YOLO 算法

    YOLO 算法(Putting it together: YOLO algorithm) 你们已经学到对象检测算法的大部分组件了,在这个笔记里,我们会把所有组件组装在一起构成YOLO对象检测算法.   ...

  3. formateDate

    function formateDate(fmt, date) { let _this = new Date(date) let o = { "M+": _this.getMont ...

  4. JAVA类变量、类方法

    类变量(static) 类变量是该类的所有对象共享的变量,任何一个该类的对象去访问它时,取到的都是相同的值,同样任何一个该类的对象去修改它时,修改的也是同一个变量. public class C { ...

  5. 【新人赛】阿里云恶意程序检测 -- 实践记录 11.24 - word2vec模型 + xgboost

    使用word2vec训练词向量 使用word2vec无监督学习训练词向量,输入的是训练数据和测试数据,输出的是每个词的词向量,总共三百个词左右. 求和:然后再将每行数据中的每个词的词向量加和,得到每行 ...

  6. 题解【洛谷P2730】魔板 Magic Squares

    题面 首先我们可以发现,在每一次 BFS 时按照 \(A→B→C\) 的顺序枚举遍历肯定是字典序最小的. 然后就是普通的 BFS 了. 我们考虑使用 \(\text{STL map}\) 来存储起点状 ...

  7. java在子类中，调用父类中被覆盖的方法

    在java中,子类中调用与父类同名的方法(即父类中被覆盖的方法)用super来调用即可,下面是示例: 子类父类的定义 public class b { void show() { System.out ...

  8. JS阻止事件冒泡与浏览器默认行为

    阻止冒泡 W3C的方法是e.stopPropagation() IE是e.cancelBubble = true; 阻止默认行为 W3C的方法e.preventDefault(), IE是e.retu ...

  9. cin，cin.get()，cin.getline()，gets()，getchar()函数的用法

    1.cin>> 用法a:最基本的流输入用法,接受一个数字或字符,自动跳过输入的空格. 用法b:接受一个字符串,但是遇到除开头外的空格则会终止输入. #include<iostream ...

  10. GNU Radio无线通信嗅探基础

    文章内容简介 1.使用哪些grc模块完成我们的嗅探工作 2.如何选择参数以获取最完美的波形 3.如何从波形还原回数据 我接下来会使用电视棒(RTL-SDR)嗅探一个固定码遥控锁开发组件. 我使用如下的 ...