Center Anything with CSS

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

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

.center-container { display: table;}
.center-container > div { display: table-cell; text-align: center; vertical-align: middle;}
.center-container > div .centered { margin: auto;}

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

← Previous Post Next Post →

atom css design git html javascript jekyll laravel life mac mobile optimization sublime tool vscode vue

web-development

Git Cheatsheet

Use webpack 4 + bootstrap 4 + fontawesome 5 (3)

Use webpack 4 + bootstrap 4 + fontawesome 5 (2)

Use webpack 4 + bootstrap 4 + fontawesome 5 (1)

ESLint Config for JavaScript

npx is cool

Browserslist config

JavaScript 模块化

Prototype chains in es6

Generate a new SSH key and add it to the ssh-agent

Make an alias with parameter

Resolve EACCES permissions errors

Open new iTerm2 tab with same profile

Exit the Vim editor

iTerm2 + Oh My Zsh

Simple event dispatcher

Broadcast generated by CoffeeScript

Git snippets

A simple infinite scroll jQuery plugin

A simple date countdown function

A simple HTML5 file upload jQuery plugin

使用 ECharts 图表库

新浪股票查询接口

使用百度地图 API 进行地理定位

Upload image with jQuery-File-Upload

Use TinyMCE

Use jQuery validation plugin

Preview image before uploaded

Chrome extension snippets

Live reloading Chrome extension with WebSocket

Tool functions that return iterables

Prevent page scrolling when a modal is open

Enable directory listing in Nginx

Access Homestead site on the same network

Upgrade Node.js

Use laravel-elixir in Laravel

A quick view of Laravel

A todo demo using Vue in Laravel

Create simple test data in Laravel

Commonly used Laravel commands

Make a sticky content

Make a sticky footer

Use Animate.css

JavaScript demonstrations

Bootstrap snippets and tips

Use autojump in zsh

CSS demonstrations

Choose a proper web font

Commonly used RegEx validation

Some commonly used UA detection

Using formdata objects

基于七牛 API 的文件上传

Center Anything with CSS

Git Diff with Beyond Compare

Simple browser detection

Detect a Touch Screen

Detect Orientation Change on Mobile Devices

Use Charles Map Local tool

Comparison of NPM and yarn commands

Commands for Packager managers

Modifying an inactive pull request locally

Syncing a fork

Creating Project Pages manually

CSS Animations with only one keyframe

Use Sass from the command line

Prevent touch event click underneath layer

Helpful aliases for common git tasks

Avoid `console` errors in browsers that lack a console

A micro clearfix hack

Modernizr Methods

Flash of Unstyled Content

HTML5 Cross Browser Polyfills

Syntax highlighting in markdown

Use Chrome DevTools

Use Git

Enable HTML5 placeholder in IE

Markdown cheatsheet

Code conventions and best practices for javascript

Use HTML5 sectioning elements in legacy IE

Use the viewport meta tag

JavaScript snippets

Use rgba in IE

Detect mobile devices

CSS tools

Bootcss codeguide

Make the Web Faster

Display Liquid code in Jekyll

Highlight code in Jekyll

Add Readmore in Jekyll

Install Git

Jekyll build trouble

tool

VS Code shortcuts for macOS

VS code extensions for frontend developers

mac

Show hidden files on mac

Show the current path in the finder

Insert the Mac command symbol

Mac 键盘快捷键

在 Mac 上创建键盘快捷键

Fix kernel_task high cpu problem

Basic bash keyboard shortcuts

Expose a local web server to the internet with ngrok

The Command Line Crash Course

Access localhost from VirtualBox

Create a bootable USB in Mac OS X

life

Words of Wisdom from Modern Family

Rescue time with RescueTime

Stop Working from a Prison Cell

editor

Create multi-line snippet in atom

Useful Atom keyboard shortcuts

Atom javascript snippets package

My atom snippets

My atom packages

Open atom from the terminal

Sublime react snippets

Sublime Text Plugins for Web Development

Sublime Text shortcuts

Sublime osx command line setup

design

Looking back to look forward

My Sketch plugins

栅格系统延续美学

蜀ICP备2021003908号-1

你好，❤朋友

这里是 Ryun 的博客 📝

📝记录了我学习 🔎的过程

作为一名前端攻城狮 🦁

希望能和大家一起 🔎

共同进步 🏃

🦁的特长：

HTML5
CSS3
JavaScript
Vue.js
微信小程序
熟练配合 Node.js、PHP 和 Laravel
熟练使用各种开发和设计工具

🦁喜欢 🆒🆒的东西

对提升效率和美感的事物有兴趣 😋

欢迎 👏交流

see this hugo-theme-dream-ink