// Importing Google font @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,700&display=swap'); // Any margins or padding added to any element won't affect its width * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; margin: 0; // This is the easiest way to center align content vertically display: flex; // The default direction elements are stacked is side by side (horizontally). This changes it to top to bottom (vertially) flex-direction: column; // Horizontally center align-items: center; // Vertically center - must have a height to work justify-content: center; height: 100vh; // Scroll bars are hidden by default overflow: hidden; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter